I would like to blur the options inside a select dropdown when opened. I could blur the selected option but not the ones inside it.
select option {
-webkit-filter: blur(5px);
filter: blur(5px);
}
Here's a codepen to test:
I would like to blur the options inside a select dropdown when opened. I could blur the selected option but not the ones inside it.
select option {
-webkit-filter: blur(5px);
filter: blur(5px);
}
Here's a codepen to test:
You can use :hover
after the class name:
select option:hover {
-webkit-filter: blur(5px);
filter: blur(5px);
color: blue; /* Just checking if rule and styles are working */
}
You can add a class on your blured option and do
<select>
<option class="blur">tatata</option>
</select>
And do that in your css
select option.blur {
-webkit-filter: blur(5px);
filter: blur(5px);
}
Or just do
select option:checked {
-webkit-filter: blur(5px);
filter: blur(5px);
}
Source: https://www.w3.org/TR/selectors/#checked
the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes
So, this CSS works, although styling is not possible in every browser.
You can take a look here too before click on -1...
CSS :selected pseudo class similar to :checked, but for <select> elements
For now, you can't apply any styles to the HTML <option>
with anything. You can apply some styles to the <select>
itself, and you can entirely remove the default styles for the <select>
using this CSS:
select {
-webkit-appearance none;
-moz-appearance: none;
appearance: none;
}
You may want to use a JQuery plugin: https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/
if you want to style the <option>
.