Apply CSS to HTML select tag
Question
How do I use below name or id of the select tag in order to apply css to it?
<div class="span5">
<select name="fields[abc][]" id="fields[abc]" style="width: 300px;" size="7" multiple="true">
<option title="abc" value="abc">abc</option>
<option title="Other" value="Other">Other</option>
</select>
</div>
This didn't work:
select[name=fields[abc][]] {
background-color: yellow !important;;
border: 1px solid #ccc;
min-height: 550px;
}
Here is the fiddle
5 answers
solution1
1 2015-02-04 07:46:00
Your CSS selector is incorrect. Change your CSS to:
option[title='abc'] {
background-color: yellow !important;;
border: 1px solid #ccc;
min-height: 550px;
}
Working Code Snippet:
option[title='abc'] { background-color: yellow !important;; border: 1px solid #ccc; min-height: 550px; }
<body> <div class="span5"> <select name="fields[abc][]" id="fields[abc]" style="width: 300px;" size="7" multiple="true"> <option title="abc" value="abc">abc</option> <option title="Other" value="Other">Other </option> </select> </div> </body>
Readup: Selectors | MDN
solution2
1 2015-02-04 07:46:12
You have got [ and ] in your name attribute,not a very good idea, but of-course you can use them, you just need to escape them in css
working fiddle : http://jsfiddle.net/cbbvb40a/1/
select[name=fields\[abc\]\[\]] {
background-color: yellow !important;;
border: 1px solid #ccc;
min-height: 550px;
}
You can use all the special characters in css this way, here you can find out Read https://mothereff.in/css-escapes
solution3
1 ACCPTED 2015-02-04 07:50:03
Wrap the attribute value inside double quotes:
select[name="fields[abc][]"] {
}
Demo:
select[name="fields[abc][]"] { background-color: yellow !important; border: 1px solid #ccc; min-height: 550px; }
<select name="fields[abc][]" id="fields[abc]" style="width: 300px;" size="7" multiple="multiple"> <option title="abc" value="abc">abc</option> <option title="Other" value="Other">Other</option> </select>
solution4
1 2015-02-04 07:53:28
There are many different solutions. In your specific example, simply writing
select {
for a selector will do.
Or if you need to be more specific,
div.span5 > select {
Another is to escape the square brackets:
select[name=fields\[abc\]\[\]] {
or put the name in quotes
select[name='fields[abc][]'] {
or target the id, also with the escaped brackets
#fields\[abc\] {
Edit:
Another alternative, for when you are really desperate, is to continue what you already started in the original code, and to use an inline style attribute for the whole thing. That way, you won't have to target anything with a stylesheet.
solution5
0 2015-02-04 08:26:47
According to the spec ,
Attribute values must be identifiers or strings.
However, fields[abc][]
is not an string, because it has no quotes:
Strings can either be written with double quotes or with single quotes.
is not an identifier , because it contains
[and]:identifiers can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item).
To fix it, you can
Use a string:
"fields[abc][]"or'fields[abc][]'.select[name="fields[abc][]"] { background-color: yellow !important;; border: 1px solid #ccc; min-height: 550px; }<div class="span5"> <select name="fields[abc][]" id="fields[abc]" style="width: 300px;" size="7" multiple="true"> <option title="abc" value="abc">abc</option> <option title="Other" value="Other">Other </option> </select> </div>Use a valid identifier, escaping necessary characters
Backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ( [ISO10646] ) character with that number, which must not be zero. (It is undefined in CSS 2.1 what happens if a style sheet does contain a character with Unicode codepoint zero.) If a character in the range [0-9a-fA-F] follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that:
- with a space (or other white space character): "\\26 B" ("&B"). In this case, user agents should treat a "CR/LF" pair (U+000D/U+000A) as a single white space character.
- by providing exactly 6 hexadecimal digits: "\\000026B" ("&B")
Then,
- Escape
[with\\[,\\5b, or\\00005b - Escape
]with\\],\\5d, or\\00005d
For example,
fields\\[abc\\00005d\\5b \\].select[name=fields\\[abc\\00005d\\5b \\]] { background-color: yellow !important;; border: 1px solid #ccc; min-height: 550px; }<div class="span5"> <select name="fields[abc][]" id="fields[abc]" style="width: 300px;" size="7" multiple="true"> <option title="abc" value="abc">abc</option> <option title="Other" value="Other">Other </option> </select> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.