0

I have a basic <select> box with two <option>s. I want to know if I can give a style to the <select> box based on a selected <option> (which has no ID, only a value), in pure CSS. The CSS that I have here only works for the bottom style, regardless of what option is chosen on page load.

Here is what I have:

#foo,
option[value="2"]:checked {
  border: 2px solid #FF9999;
}
#foo,
option[value="1"]:checked {
  border: 2px solid #2fa154;
}
<select id="foo">
  <option value="1">Bar 1</option>
  <option value="2">Bar 2</option>
</select>

Is what I am asking possible with pure CSS without the use of jQuery etc.?

SeinopSys
  • 8,787
  • 10
  • 62
  • 110
Zak
  • 6,976
  • 2
  • 26
  • 48
  • 2
    Possible duplicate of [Style – SeinopSys Mar 08 '16 at 20:47

1 Answers1

2

Currently, there is no way to do this with css3 only.

inafalcao
  • 1,415
  • 1
  • 11
  • 25
  • Please either add info from that question directly into your answer, or refrain from posting this as an answer. Currently it is a link only answer and does not provide any detail how to solve the question. – gitsitgo Mar 08 '16 at 20:48
  • @gitsitgo you should not of downvoted, inafalcao did answer the question correctly. – Adam Buchanan Smith Mar 08 '16 at 21:24
  • @AdamBuchananSmith you should not assume I was the downvoter, because I didn't. I was only asking him to describe the alternative solution he was proposing. – gitsitgo Mar 08 '16 at 21:33
  • @gitsitgo there is no alternative, OP asked for css only, no jquery. – Adam Buchanan Smith Mar 08 '16 at 21:35
  • @gitsitgo Question: "Is what I am asking possible with pure CSS without the use of jQuery etc.?" Answer: "Currently, there is no way to do this with css3 only." NEXT! – Yan Paulo Mar 09 '16 at 20:15