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;
}
Related
I got a problem with my css in ionic...
I want to change the css, when a radiobutton is clicked. as shown below.
[type=radio]:checked + ion-icon {
background-color: $primaryColor;
color: white;
font-size: 45px;
}
The above css works on for the html tag but in ionic you have a tag called ion-radio. So is there a way to achieve the same, but with the radio button from ionic?
ion-radio:checked + ion-icon {
background-color: $primaryColor;
color: white;
font-size: 45px;
}
As far as I noticed from the docs, once an ion-radio is checked, it gets the class radio-checked.
Inspect your elements, don't they get this class too once they're checked?
I've fixed it by adding a class if a specific radiobutton is checked.
HTML:
<ion-icon [ngClass]="{'active': (gender == 'Female')}" name="female"></ion-icon>
CSS:
/* CHECKED STYLES */
ion-icon.active {
background-color: $primaryColor;
color: white;
font-size: 45px;
}
I am new css and I am having hard time changing the color of the button when clicked. Normally, when a button is clicked, the button color becomes blue for a very short period of time. I want it instead to be yellow. How can I achieve that?
html
<button id="btn">Hi</button>
It's very easy. You can get this by :active and :focus states. Just try the below snippet. (You can change the colors as per your needs.)
button {
background: #0095ff;
border: none;
padding: 10px 20px;
color: #fff;
outline: none;
}
button:active, button:focus {
background: yellow;
color: #000;
}
<button>Click Me!</button>
As you are new to CSS, if you need then you can read this if you want to:*
https://developer.mozilla.org/en-US/docs/Web/CSS
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 tried this CSS:
html.dark .btn:hover:not(disabled),
html.dark .btn:focus {
color: #ffffff;
background-color: #222222;
*background-color: #151515;
}
html.dark .btn.disabled,
html.dark .btn[disabled] {
color: red;
background-color: #222222;
*background-color: #151515;
}
But still when I hover over the button I see the color change from red to white. Note that it's correctly picking up the fact it's disabled. I am using:
disabled="disabled"
in my button.
Try .btn:hover:not(:disabled),
A small example
Your example didn't work because you are using .btn:hover:not(disabled) you have to use a pseudo class to achieve what you need reference pseudo classes
button:hover:not(:disabled){
color:red;
}
<button>Not disabled</button>
<button disabled>disabled</button>
Is there any option, or special selector to change the style for a pressed button, what I mean by that..when a user clicks a button I want to change the style for that button? Is there any option to do that like: :focus or only with javascript click/focus event?
I think you are looking for the :active pseudo-class...
#btn { border: solid 5px red; padding: 5px; }
#btn:hover { border-color: green; }
#btn:active { border-color: blue; }
<button id="btn" />
Note: if you are using both :hover and :active on a single element, the :hover definition must come first.