是否可以使用输入值属性作为CSS选择器?

前端之家收集整理的这篇文章主要介绍了是否可以使用输入值属性作为CSS选择器?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以使用CSS选择器来定位具有特定值的输入?

示例:如何根据值=“美国”定位下面的输入

<input type="text" value="United States" />

解决方法

动态值(oh no!D;)

正如npup在他的答案中解释的,一个简单的css规则将只定向属性值,这意味着这不覆盖html节点的实际值。

JAVASCRIPT的救援!

> Ugly解决方法http://jsfiddle.net/QmvHL/

原始答案

是的,这是非常可能的,使用css属性选择器,你可以通过这种方式引用输入的值:

input[value="United States"] { color: #F90; }​

• jsFiddle example

from the reference

  • [att] Match when the element sets the “att” attribute,whatever the
    value of the attribute.

  • [att=val] Match when the element’s “att”
    attribute value is exactly “val”.

  • [att~=val] Represents an element
    with the att attribute whose value is a white space-separated list of
    words,one of which is exactly “val”. If “val” contains white space,
    it will never represent anything (since the words are separated by
    spaces). If “val” is the empty string,it will never represent
    anything either.

  • [att|=val] Represents an element with the att
    attribute,its value either being exactly “val” or beginning with
    “val” immediately followed by “-” (U+002D). This is primarily intended
    to allow language subcode matches (e.g.,the hreflang attribute on the
    a element in HTML) as described in BCP 47 ([BCP47]) or its successor.
    For lang (or xml:lang) language subcode matching,please see the :lang
    pseudo-class.

> css attribute selectors reference

原文链接:https://www.f2er.com/css/220212.html

猜你在找的CSS相关文章