0

We are having a CSS problem. In an attempt to create an MWE multiple things were not working. So I created a CSS file containing * {} the default rule, an id #x which should be the highest specificity rule? as well as the original problem input[type=checkbox]. We are very confused.

Testing under chrome/chromium and firefox.

Can anyone explain:

  1. Why is hell not background yellow since the text is inside the div box?

  2. Why is the checkbox not font size 28pt and blue since it is a checkbox? It is not overriding input. it is as though input[type=checkbox] is not a legal css pattern, but there are answers all over including stackoverflow showing it. see: CSS/HTML: How do I change the color of the check mark within the checkbox input? https://www.geeksforgeeks.org/how-to-style-a-checkbox-using-css/

  3. How could we override and make disabled checkboxes look different than the default behavior? The default is to ghost out the checkboxes and it is hard to see whether they are checked or not. How would we set the color of the background, line and check of the checkbox only for disabled checkboxes?

CSS file:

#x {
  background-color: #cc0;
  font-size:10pt;
  color: #00f;
}
.answer {
  background-color: #800;
  color: #cc0;
  font-size:20pt;
}

input {
  font-size: 28pt;
  background-color: #0c0;
}

input[type="checkbox"] {
  font-size: 14pt;
  background-color: #00f;
}

input[type="checkbox"][disabled] {
  font-size: 14pt;
  background-color: #000;
}

* {
  background-color: #0cc;
}

We also tried input[type=checkbox] without quotes and input[type=checkbox]:disabled. I thought square brackets are for subtypes and colon is for pseudotypes, but I'm obviously very confused so an explanation would also be very useful.

HTML file:

<html>
<head>
  <link rel="stylesheet" href="styles.css"></link>
</head>
<body>
  <div id="x">
    hell
    <input  type="text" />
    <input  type="checkbox" value="A" >A</input>
    <input  type="checkbox" value="B" checked disabled>B</input>
    <input type="radio" value="C">C</input>
  </div>
  <div class="answer">
    hello
    <input  type="text" />
    <input  type="checkbox" value="A" checked>A</input>
    <input  type="checkbox" value="B" >B</input>
    <input type="radio" value="C">C</input>
  </div>
</body>
</html>
Dov
  • 8,000
  • 8
  • 46
  • 75
  • With regards to point 1 & 2, `hell` does have a background yellow and inputs are not blue because the `*` style is over written by the `input` style as seen here: https://jsfiddle.net/AndrewL64/76uxpmfq/1/ – AndrewL64 Jun 24 '20 at 18:57
  • @andrewl64. I can see at your link 1 it works but on firefox locally it is not. Which is perplexing. Why is the rule input[type="checkbox"] not overriding the general input style? Why is input[type="checkbox"][disabled} not overriding that? – Dov Jun 25 '20 at 14:30
  • That is because you can't set `background-color` for checkboxes. You can however, add say, an outline to it like `outline: red 1px solid;` to add some extra visual indication to all your checkboxes or just to disabled checkboxes. – AndrewL64 Jun 25 '20 at 14:50

0 Answers0