Clever Geek Handbook

: target selector does not work with option tags

I tried to help a StackOverflow member here and I found out that CSS selector :target

doesn't work with option tags. I have provided an example to illustrate using the w3schools tutorial , the code is:

:target {
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}
      

        
        
        
      

    
<select>
    <option><a href="#image1">This doesn't work!</a></option>
    <option><a href="#image2">Selection2</a></option>
    <option><a href="#image3">Selection3</a></option>
</select>

<p><a href="#image1">This Works!</a></p>

<div id="image1">1</div>
<div id="image2">2</div>
<div id="image3">3</div>
Run codeHide result


Any idea why? am i something wrong?

+3


source to share


2 answers


The tag <option>

should only have text inside, so what happens is that the browser ignores the other tags and only shows the text. You can check the rendered HTML and you can see what I am talking about. In this case, do it like:



<select>
    <option>This doesn't work!</option>
    <option>Selection2</option>
    <option>Selection3</option>
</select>
+1


source


This is because the option does not allow other elements to be used.



Only solution with Javascript I think /

+1


source






More articles:


All Articles