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

possible duplicate of [css style on select option](http://stackoverflow.com/questions/17419957/css-style-on-select-option) — H2ONOCK, Feb 04 '15 at 07:46

score 1 · Answer 1 · answered Feb 04 '15 at 07:46

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>

Updated jsFiddle

Readup: Selectors | MDN

Sorry, but why are you applying the styles to the `option` elements, rather than the `select` as the OP wanted? Your resulting `select` is now a lot higher than the OP's. — Mr Lister, Feb 04 '15 at 08:25

Naeem Shaikh · Answer 2 · 2015-02-04T07:54:25.357

1

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

edited Feb 04 '15 at 07:54

answered Feb 04 '15 at 07:46

Naeem Shaikh

15,331
6
50
88

In PHP, square brackets inside field names instruct PHP to create an array of values. – Salman A Feb 04 '15 at 08:16
well the question does not belong to php, even if it is just write the css outside in a separate file :), and this solution will also let you any special character be there as attribute value. – Naeem Shaikh Feb 04 '15 at 08:19
I was referring to the _not a very good idea_ part of your answer. At times, they are required. – Salman A Feb 04 '15 at 08:26

score 1 · Accepted Answer · answered Feb 04 '15 at 07:50

1

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>

answered Feb 04 '15 at 07:50

Salman A

262,204
82
430
521

Though this is a nice answer, still i wish I could use doubleQuotes as a part of my name attribute – Naeem Shaikh Feb 04 '15 at 07:51
@NaeemShaikh If you want to have double quotes in the name, use single quotes around it. Or, escape the quote with a backslash in the CSS. – Mr Lister Feb 04 '15 at 08:21
if I want both written`'` and `"` consecutively for n number of times... Just kidding :) – Naeem Shaikh Feb 04 '15 at 08:25

Mr Lister · Answer 4 · 2015-02-04T08:29:50.920

1

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.

edited Feb 04 '15 at 08:29

answered Feb 04 '15 at 07:53

Mr Lister

45,515
15
108
150

this is just a copy paste from two of the answers before – Naeem Shaikh Feb 04 '15 at 07:54
@NaeemShaikh Most answers weren't there when I wrote this! – Mr Lister Feb 04 '15 at 07:59
I understand.. thats why there is no downvote from me ;) – Naeem Shaikh Feb 04 '15 at 08:00
@NaeemShaikh If my answer would have been completely superfluous, I'd delete it. But it also shows how to be specific without targeting the name, so I'll leave this up. – Mr Lister Feb 04 '15 at 08:02

score 0 · Answer 5 · answered Feb 04 '15 at 08:26

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>
```

Apply CSS to HTML select tag

5 Answers5