0

(I wrote "tab helpers" in the title, which I guess is an invented terminology. Please, correct me.)

In the snippet below there's two checkboxes, one of which has opacity reduced to 20%.

.checkbox1 {
  opacity: 100%;
}
.checkbox2 {
  opacity: 20%;
}
<div class="checkbox1">
  <input type="checkbox" id="myCheck1">
</div>
<div class="checkbox2">
  <input type="checkbox" id="myCheck2">
</div>

If I tab-select the second one, I see this (well, not the stuff in blue):

enter image description here

Is there anyway to have that yellow thing retain 100% opacity even if the element's opacity is set via CSS to other than 100%?

I guess this might be all up to the browser, but I'm really not sure.

Enlico
  • 23,259
  • 6
  • 48
  • 102

1 Answers1

0

The yellow stroke is the outline and is notoriously hard to style since you're correct that it is browser-specific. User-defined styles can and often are disregarded wholesale by the browser.

As part of the element, it is affected by the value of the element's opacity property. This means you cannot set its opacity directly.

If you want to make the element semi-transparent without affecting the outline, you should style the other parts of the element with RGBA colors so you can set the transparency per-part. (see: I do not want to inherit the child opacity from the parent in CSS or @Rohit Azad Malik's answer to How to apply an opacity without affecting a child element with html/css?).

There are ways to style a checkbox (or other input types), but they're browser-specific.

D M
  • 5,769
  • 4
  • 12
  • 27