Why isn't the transparency applied to the selection applied to the parameters?
Opacity applied to <select>
does not apply to <option>
which is a child, why?
This feature allows you to create custom dropdowns that look consistent across platforms, while still preserving the custom behavior of the options. Example 1 , example two .
I wonder how reliable this behavior is. Is this a standard or a gimmick?
select {
opacity: 0;
border: none;
height: 24px;
display: block;
margin-top: -24px;
border: 1px solid red;
width: 100%;
}
div {
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
}
span {
display: block;
padding: 0 10px;
line-height: 24px;
}
<div>
<span>Click me</span>
<select>
<option>Opt 1</option>
<option>Opt 2</option>
<option>Opt 3</option>
</select>
</div>
source to share
According to my understanding of the spec, this is not reliable.
§3.2. Transparency: The opacity property says it opacity
also affects the content of the element (selection is mine):
Conceptually, after an element ( including its descendants ) is displayed in an RGBA splash screen, the opacity parameter specifies how to blend the off-screen rendering into the current composite rendering.
However, elements select
replace elements. And the item being replaced
Element whose content is outside the scope of CSS formatting [...]
The content of replaced elements is not covered in the CSS Rendering Model.
Therefore, it opacity
may not affect the content of the replaced element. But it can affect him too.
source to share
This is the default behavior of your browser, which you cannot influence with just <select>
. But you can use special select boxes, one of them is jQuery UI Selectmenu .
But keep in mind that mobile devices are optimized for the element <select>
and with jQuery plugins it may not look as expected. However, this is a good start when you want to customize your choices.
source to share