Why is the :enabled pseudo-class needed when the input element is active and available by default?
CSS
.useable {
background: maroon;
}
:enabled {
background: green;
}
:disabled {
background: red;
}
HTML
<input class="useable" type="text"> <!-- :enabled pseudo-class look like a similar default input usage so what's the diff. -->
Related
I have a <div> that contains a <button>. Each have their own classes. In the styles for each of those classes I specify the background-color property. For some reason the child button over-rides the parent property.
.tab {
background-color: red;
}
.tab,
button.active {
background-color: blue;
}
<div class="tab">
<button>My Button</button>
<button class="active">button 2</button>
</div>
Here is a JS Fiddle showing it:
https://jsfiddle.net/jp3kbfwn/
Remove the comma after .tab:
.tab button.active {
background-color: blue;
}
With the comma, it is saying to set the background color to blue for both the .tab class and button.active.
The .tab element is getting the blue background because you're using a comma between .tab and button.active when defining their styles.
The comma in this context means apply to both of these elements.
This is because you're listing your css elements rather than using selectors. Heres what the css should look like.
<style>
.tab {
background-color: red;
}
.tab > button.active {
background-color: blue;
}
</style>
Note how i've added in the > selector
I've around 50* buttons and I want to change the style only for not disabled button
button{
background-color: white;
}
You need to use :disabled selector.
button:disabled {
background: white;
}
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 5 years ago.
I looked at W3 schools website W3Schools which explained styling buttons with CSS. I need to specify a button style when it is clicked. What is the pseudo-class selector for this? e.g. the hover button is:
.button:hover{
}
This button will appear yellow initially. On hover it will turn orange. When you click it, it will turn red. I used :hover and :focus to adapt the style.
(The :active selector is usually used of links (i.e. <a> tags))
button{
background-color:yellow;
}
button:hover{background-color:orange;}
button:focus{background-color:red;}
a {
color: orange;
}
a.button{
color:green;
text-decoration: none;
}
a:visited {
color: purple;
}
a:active {
color: blue;
}
<button>
Hover and Click!
</button>
<br><br>
Hello<br><br>
<a class="button" href="#">Bye</a>
If you just want the button to have different styling while the mouse is pressed you can use the :active pseudo class.
.button:active {
}
If on the other hand you want the style to stay after clicking you will have to use javascript.
There are three states of button
Normal : You can select like this button
Hover : You can select like this button:hover
Pressed/Clicked : You can select like this button:active
Normal:
.button
{
//your css
}
Active
.button:active
{
//your css
}
Hover
.button:hover
{
//your css
}
SNIPPET:
Use :active to style the active state of button.
button:active{
background-color:red;
}
<button>Click Me</button>
Unfortunately, there is no :click pseudo selector. If you want to change styling on click, you should use Jquery/Javascript. It certainly is better than the "hack" for pure HTML / CSS. But if you insist...
input {
display: none;
}
span {
padding: 20px;
font-family: sans-serif;
}
input:checked + span {
background: #444;
color: #fff;
}
<label for="input">
<input id="input" type="radio" />
<span>NO JS styling</span>
</label>
Or, if you prefer, you can toggle the styling:
input {
display: none;
}
span {
padding: 20px;
font-family: sans-serif;
}
input:checked + span {
background: #444;
color: #fff;
}
<label for="input">
<input id="input" type="checkbox" />
<span>NO JS styling</span>
</label>
button:hover is just when you move the cursor over the button.
Try button:active instead...will work for other elements as well
button:active{
color: red;
}
I have the following CSS classes:
button.current {
background-color: #000;
}
button:hover {
background: #0007d5;
}
How can I make it so the background color does not change for the second button? In other
words I want the current and the hover to one work if there's not an additional class of
"inactive" on the button.
<button class="current">Show the current background</button>
<button class="current inactive">Show the current background</button>
You can use the :not() pseudo-class:
button.current:not(.inactive) {
background-color: #000;
}
button:hover:not(.inactive) {
background: #0007d5;
}
jsFiddle Demo
I've got a css buttons style and some predefined colour styles. I use colour classes to colour things the same colour and a button style to make the buttons round.
How do I add a hover style to my buttons to change the colour to a lighter shade? I thought it would be as simple as .class class2:hover {etc} but it doesn't work for some reason.
Here's a fiddle I prepared to demonstrate:
http://jsfiddle.net/7n4Wy/
HTML
<p class="red button">Test</p>
<p class="blue button">Test</p>
<p class="red"> Not a button </p>
CSS
.red {
background: red;
}
.blue {
background: blue;
}
.button {
border-radius: 6px;
}
.button:hover .red:hover {
background: pink;
}
What you have is trying to match .red:hover that is inside .button:hover, which implies a nested element in your markup.
Since you're selecting the same element, you need to combine both classes with a single :hover:
.red.button:hover {
background: pink;
}
Updated fiddle
You can apply a CSS-rule to multiple selectors (classes like «.button», or states like «:hover») by separating them with a comma.
therefore just add a comma:
.button:hover, .red:hover {
background: pink;
}
Use following code JSFIDDLE
.button.red:hover {
background: pink;
}
To apply multiple classes, don't add a space (just use another period):
CSS
p.button {
border-radius: 6px;
}
p.red {
background: 6px;
}
p.button.red:hover {
background: pink;
}
HTML
<p class="button red">Hover Here</p>
The space is used to denote a child element. i.e. p.button red:hover would affect all elements with class red on hover that are wholly contained in parent paragraphs with class button.