This question already has answers here:
Enable :focus only on keyboard use (or tab press)
(11 answers)
Closed 3 years ago.
In my following minimal example I have a div that acts as a button. It has a tabindex, so if I use the tab key and get to the element, the style of the class .with-focus is applied. So far so good.
But I get the style of the class .with-focus as well when clicking with the mouse on the button. And this is what I do NOT want. Is it possible to avoid?
.with-focus[tabindex]:focus {
outline: 5px solid green;
}
.btn {
background-color: #eee;
border: 1px solid #ddd;
cursor: pointer;
height: 50px;
text-align: center;
width: 200px;
}
<div class="btn with-focus" tabindex="0" onclick="console.log('clicked')">
Button
</div>
I think you can use the :active substate, try adding this after the :focus selector
.with-focus[tabindex]:active {
outline: 0;
}
Codepen
Related
This question already has answers here:
How can I replace text with CSS?
(25 answers)
Closed 5 months ago.
This post was edited and submitted for review 5 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Here is the basic button hover program. I can control what the color of the button is depending on it's hover state, but can I change the text inside the button if someone hovers over it?
for example: a button that says "Understand?" and when you hover over it, the text changes to "Yes"
.button {
width: 100px;
height: 50px;
background-color: gold;
border: 2px solid firebrick;
border-radius: 10px;
font-weight: bold;
color: black;
cursor: pointer;
}
.button:hover {
background-color:rgb(0, 255, 0)
}
<button class="button">hover over me!</button>
This should work. I think I'd probably just go ahead and use js for this, but I don't see any glaring issues w/ this approach. Not ideal for accessibility maybe.
.button {
width: 100px;
height: 50px;
background-color: gold;
border: 2px solid firebrick;
border-radius: 10px;
font-weight: bold;
color: black;
cursor: pointer;
}
.button::before {
display: block;
content: "Hover over me!"
}
.button:hover::before {
content: "FOO"
}
<button class="button"></button>
We just move the text content of the button into a ::before pseudo-element, and can control its content via css now.
This question already has answers here:
CSS Selector for <input type="?"
(4 answers)
Closed 4 years ago.
I’m trying to use CSS to make all my buttons this style:
button {
background-color: #4CAF50;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
But now, I have a different type of button where it is <input type=“button>. I tried changing the CSS to make it include buttons AND inputs like this:
button, input {
background-color: #4CAF50;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
The problem with that, it makes ALL inputs, like text fields green. So is there any way that I can make my inputs, ONLY ones that have the button type be styled?
Change
button, input
to
button, input[type="button"]
This uses CSS' attribute selector syntax. Or give your inputs of type button a common CSS class. Ex <input type="button" class="myButton"> and then change your selector to:
button, .myButton {...
Just add a class to whatever elements you want styled in that way, and target the class instead of button. CSS Classes
This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
Closed 5 years ago.
I use an <input> for which I style the border:
input {
font-size: 300%;
border-width: 10px;
border-style: solid;
border-radius: 30px;
}
<input>
The problem is that once <input> has the focus, a tiny blue border appears:
I do not see it anywhere in DevTools so I believe it is a property of <input> itself, which was not intended to have rounded borders (wildly guessing)
Is it possible to get rid of it?
You can remove it with outline:none, but it creates accessibility issues.
input {
font-size: 300%;
border-width: 10px;
border-style: solid;
border-radius: 30px;
outline:none;
}
<input>
that should work for you
textarea:focus, input:focus{
outline: none;
}
but this is already more detailed in the following link
How to remove border (outline) around text/input boxes? (Chrome)
input:focus {
outline: none;
}
I have problem with using animation in css and event handler in JS.
I have to specific styles for my button (normal and with :active suffix). This solution let's me simulate 'clicking button'. In Html(this is angular directive) I have directive ng-click on that button but it only runs event when I click body of a button not border. But my css sets pointer on the border and there is animation an on clicking border too.
I am looking for the best practice/solution to repair that incident. Maybe I must leave css style with active suffix or add something to my styles.
CSS
#addButton {
padding: 5px;
float: left;
background: linear-gradient(#92AFDE, #668FED);
border: solid 2px #14438F;
margin-left: 10px;
border-radius: 10px;
font-size: 20px;
cursor: pointer;
}
#addButton:ACTIVE {
transform: translateY(4px);
}
HTML
<div class="card">
<img ng-click="selectCard()" style="width: 150px; height: 200px;" ng-src="cards/\{{cardId}}.png"></img>
<button ng-click="addCard()" id="addButton">Add<div class="count">0</div></button>
<div id="delButton">X</div>
</div>
Because when you specify border it comes after the actual width of the element.
Use
#addButton{
box-sizing:border-box
}
This css property will merge the border space in actual width.
Faced the same issue on a project I am developing. I used the above answer https://stackoverflow.com/a/38826326/7622397. But it didn't work. Clicking on border does not fire the click event. But it's important to add box-sizing: border-box (as mentioned in the answer) to make sure the below mentioned workaround works
The reason mentioned in the comment seems to be correct
OK i know where is the problem. If i click on the button the "activate" suffix moves the button down and browser don't notice click on this button because pointer is outside my div (after moving)
As a workaround, I created a div outside the button, gave a padding-top css (value is same or greater as the height of translateY) and give the onClick event to the div and not the button. I know, it's not a tidy fix, but it certainly works.
Code for reference
.sw-form-button-card {
padding: 5px 10px;
text-decoration: none;
background: #668ad8;
color: #FFF;
border: none;
box-sizing:border-box;
border-bottom: solid 3px #627295;
border-radius: 3px;
cursor: pointer;
}
.sw-form-button-card:active {
-ms-transform: translateY(2px);
-webkit-transform: translateY(2px);
transform: translateY(2px);
border-bottom: none;
}
HTML part:
<div data-bind="click: () => openDDDialog()" style="padding-top: 5px;">
<button class="sw-form-button-card">
<span style="font-size: 15px;" data-bind="text: 'Button text'"></span></div>
</button>
</div>
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 1 year ago.
How do I set a background color to my <button> when it's clicked using css?
.myBtn {
background-color: #fff;
cursor: pointer;
color: #000;
text-decoration: none;
text-transform: uppercase;
}
html:
<button type="button" class="myBtn">Highlight me when Clicked</button>
Use the active selector for this. Here's a working FIDDLE.
.myBtn:active {
background-color: #dd4814;
}
Check this for reference.
EDIT:
You can use the focus selector also
.myBtn:focus {
background-color: #dd4814;
}
But in this the color will change back again if the focus is lost from the button.
I guess you will need to take the help of Javascript or JQuery for changing the css rules on the click event of the button.
Sorry - but I don't have the rep to comment. But I think this may answer your question: Change background on button click, using CSS only?
EDIT: Oops. That looks like it changes the entire background - but you could probably still use it but change
input[type="checkbox"]:checked + div{
background: #5BC0DE;
}
to target the button by using the button class with something like this:
input[type="checkbox"]:checked + .mybtn{
background: #5BC0DE;
}
Edited answer:
<html>
<head>
<style>
.myBtn:active{
background-color: red;
}
.myBtn:visited{
background-color: red;
}
</style>
</head>
<body>
<button class ="myBtn">Click here to change bgcolor</button>
</body>
</html>
The following code is a snippet of SCSS.
:root {
--b1: beige;
--b2: brown;
--b3: #654321;
}
#check {
display: none;
}
.btn {
background-color: var(--b2);
padding: 5px;
border: 1px solid var(--b3);
font-family: Google Sans;
font-weight: 600;
color: var(--b1);
outline: none;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: darken(brown, 5);
border: 1px solid darken(#654321, 10);
}