The code:
HTML
<button type="radio"/>
CSS
button:focus {
background: red;
}
When I click it in the mobile phone's browser, the style is not working.
The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example
JS Fiddle
HTML
<div>
<button class="btn" type="button" name="button">
click
</button>
CSS
.btn {
color: #000;
background: red;
}
.btn:focus {
background: green;
}
Doesn't this solve your problem? CSS - :focus Not Working on iOS
<button onclick="this.focus()">Button</button>
Related
how make button blur when it is disabled.
Is there any way to do it?
<button (click)="addRow()" class="add-row-btn" mat-button [disabled]="isDisabled"> Add Row</button>
You can achieve this with css:
button[disabled] {
filter: blur(2px);
}
Enabled button:
<button>Button</button>
<hr/>
Disabled button:
<button disabled="disabled">Button</button>
Click Me!
button:disabled {
background: #222;
color: #fff;
font-weight: 900;
padding: 15px 30px;
border-radius: 5px;
filter: blur(2px);
}
you can use the :disabled selector on the button class like the following:
HTML
<button class="add-row-btn" disabled="disabled" onclick="addRow()"> Add Row</button>
CSS
.add-row-btn:disabled {
background-color:orangered;
}
codepen https://codepen.io/ahamdan/pen/wvWKgqp
I have the following button:
<button class="btn btn-outline-secondary btn-lg">
TEXT<i class="fa fa-plus"></i>
</button>
I would like to style the buttons text and the fa-icon with a different color. Both should be able to change the color when i hover over the button. Im able to do either of them but cant get both working at the same time:
I can style them differently:
.fa.fa-plus {
color: green;
}
.btn {
color: WHITE
}
This makes the text white and the icon green(Thats what i want). When i hover over the button, im now only able to change the texts color:
.btn:hover {
color: BLACK;
}
How can i change the icons color too if the button is hovered? I would like the text for example to be black and the icon to be white when the button is hovered. But im not able to achieve the latter.
You can use a rule to both the button inner text as well as the icon as following:
.fa.fa-plus {
color: green;
}
.btn {
color: WHITE
}
.btn:hover .fa,
.btn:hover{
color: red;
}
<button class="btn btn-outline-secondary btn-lg">
TEXT<i class="fa fa-plus">+</i>
</button>
Your code means that you want to change button text on hover.
To do what you want, you should apply styles to your icon on button hover:
.btn:hover .fa.fa-plus {
color: RED;
}
So, in this case, you will apply styles to .fa.fa-plus, but on button hover.
Hope, it makes sense to you :)
Give a parent div for that button and add hover effect using that parent class
<style>
.fa.fa-plus {
color: green;
}
.btn {
color: WHITE
}
.hover:hover .btn, .hover:hover .fa.fa-plus{
color: BLACK;
}
</style>
<div class="hover">
<button class="btn btn-outline-secondary btn-lg">
TEXT<i class="fa fa-plus"></i>
</button>
</div>
The below is an example of how to change the child via the parent :hover attribute, implement it according to how you wish to color the plus icon.
.btn:hover .fa.fa-plus {
color: red;
}
You can use this code to access the child element of hover:
.btn:hover . {
color: BLACK;
}
use this in each element one-by-one on your main page,
For an example:
div.e:hover {
background-color:red;
}
I am working on a site where in the master css file anchor outline has been set to none like this:
*:focus {
outline: none!important;
}
I have added a more specific class to override this the above like this:
header a:focus {
outline: initial!important;
}
Problem is that this is not working. Below code works
outline: 2px solid $black!important;
but I want the browser default styling to show which I thought should be possible with "initial" keyword instead of me trying to mimic the all the default styles.
Today I stumbled upon this. An easy fix was using revert. Works on Chrome for me.
.outline-reset {
outline: revert !important;
}
It may very well be that your browser does not have a default outline for the :focus pseudo-class. In this case initial and unset wouldn't help.
If you want a particular outline for some selectors you would have to define it:
:focus {
outline: none;
}
header a:focus {
outline: 1px dotted #666;
}
<p>https://developer.mozilla.org/</p>
<nav>
<ul>
<li>https://developer.mozilla.org/</li>
</ul>
</nav>
<header>https://developer.mozilla.org/</header>
On my home machine (Windows 10) I tested on Firefox, Chrome, Edge and IE11: none show outlines by default on :focus.
Here is a test you can run in various browsers. To me it shows that the default in most browsers is the absence of an outline on the :focus state. The exception is IE11.
:focus {
outline: 1px dotted #f60;
}
section :focus {
outline: initial;
}
<body>
<h2>With specified <code>:focus</code> outline</h2>
<p>https://developer.mozilla.org/</p>
<nav>
<ul>
<li>https://developer.mozilla.org/</li>
</ul>
</nav>
<form>
<button type="button">button button</button>
<button type="button">submit button</button>
<input type="submit" value="submit input">
<input type="image" src="https://via.placeholder.com/100x30" border="0" alt="Submit" />
</form>
<img src="https://via.placeholder.com/200x30">
<hr>
<section>
<h2>With <code>:focus</code> outline reset to <code>initial</code></h2>
<p>https://developer.mozilla.org/</p>
<nav>
<ul>
<li>https://developer.mozilla.org/</li>
</ul>
</nav>
<form>
<button type="button">button button</button>
<button type="button">submit button</button>
<input type="submit" value="submit input">
<input type="image" src="https://via.placeholder.com/100x30" border="0" alt="Submit" />
</form>
<img src="https://via.placeholder.com/200x30">
</section>
If you define outline styles and want to ‘revert’ back to the default User Agent styles on :focus, this will help. You will find cross-browser issues using the initial property... I recommend this one.
.myClass:focus {
outline: 1px dotted #212121;
outline: 5px auto -webkit-focus-ring-color;
}
To get an outline close to the browser default, use the auto keyword with the appropriate color for your browser. See this link for more information.
a:focus {
outline: 5px auto Highlight;
outline: 5px auto -webkit-focus-ring-color;
}
I have changed p-button styles on hover .
My problem is when the button state is set to disabled and I hover it the color changes also.
<button pButton type="submit" label="Launch #RT" class="ui-button-success color" [disabled]="groupList.length+ejList.length>0 ? false: true"></button>
Then in CSS:
.ui-button-success.ui-state-disabled, .ui-widget:hover:disabled, .ui-button-success.color{
background-color: white !important;
color: #00965E;
}
.ui-button.ui-button-success:hover
{
background-color: #00965E !important;
color: white;
}
How can I unchange button style when it's disable and I hover it. but when it's enable change color
Try to use :not() selector here with :hover
.ui-button-success {
background-color: white;
color: #00965E;
}
.ui-button-success:not([disabled]):hover {
background-color: #00965E;
color: white;
}
<button type="button" class="ui-button-success color" disabled>foobar</button>
<button type="button" class="ui-button-success color">foobar</button>
If I have a button with an image inside of it how can I activate the image hover when the cursor is hovered over the button but not the image itself?
This is what I have so far:
<button type="button" class="btn btn-normal"><img src="images/contents/123.png"onmouseover="this.src='images/contents/123-hover.png'" onmouseout="this.src='images/contents/123.png'" class="image" /></div>
css:
.btn-normal {
background-color: #eee;
padding: 15px!important;
width: 250px;
margin-bottom:20px;
}
.btn-normal:hover {
background-color: #ddd;
}
.image {
background-color: #ccc;
}
.image:hover {
background-color: #009fe3;
}
Really at a loss with this - any help is appreciated!
try this
HTML file
<html>
<body>
<script type="text/javascript">
function mouseoverImage()
{
document.getElementById('img').src='images/contents/123-hover.png';
}
function mouseoutImage()
{
document.getElementById('img').src='images/contents/123.png';
}
</script>
<button class="btn btn-normal" onmouseover="mouseoverImage()" onmouseout="mouseoutImage()"><img id="img" class="image" src="images/contents/123.png"/></div>
Think I've figured it out with css... I'm thinking background-image: on the button should work. Hopefully!...
As suggested by #Henrik in the comments above, .btn:hover .image selector should work for you. I have created a simple fiddle with your code. I have added a border style to the image element on hover of btn. And it works.
.btn:hover .image{border:1px solid red;}