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:
-
Why is hell not background yellow since the text is inside the div box?
-
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/
-
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>
Aucun commentaire:
Enregistrer un commentaire