When a button that is not styled by any css is clicked, it turns blue for an instant and then returns to its normal white color.
However, when a button that is styled as shown below is clicked, a blue highlight appears around it and does not go away until something else on the screen is clicked.
I would like my button not to have this weird blue highlight. How would I fix this and still keep the button styled?
Any solutions I have found thus far involve javascript, but I am looking for a pure css solution here.
<html>
<head>
<style>
button {
border: solid #316A8F;
border-radius: 12px;
background-color: #F9F9F9;
color: #003C63;
}
</style>
</head>
<body>
<button>click me.</button>
</body>
</html>
It's called focus try this:
button:focus {
outline: none;
}
button {
border: solid #316A8F;
border-radius: 12px;
background-color: #F9F9F9;
color: #003C63;
}
button:focus {
outline: none;
}
<button>click me.</button>
Related
Most buttons are meant to be easily clicked. The idea of a button is to have a simple, elegant way of getting around any web-page. It is one of humanities best inventions. But I have found a way to spoil it. For some reason, by adding a font awesome icon to a downdrop button menu, It makes the whole button stop working except for on the outer corner of it. Can anyone help me make the whole button work? What is going on?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><i class="fa fa-list-ul fa-3x"></i></button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
It turns out that the problem experienced can easily be solved. simply add a space, and then add your .dropbtn class to the icon class That is already there. Also, you will need to get rid of the fa-3x part. that is an added class member used to make the list icon bigger. but, you can also do that with a style="" that has a font-size of 3em.
When done, it should look something like this:
<i style="font-size: 3em;" class="fa fa-list-ul dropbtn"></i>
With the new Chrome update Chrome is displaying improved default form styling.
According to the post I would say it should be possible to change this form theme to match the color set of a website.
We were going for beautiful, webby, and neutral. We hope that every design system would see a bit of themselves in the new designs and easily imagine how they might be adapted for their own branding.
I have spend the last few hours searching and trying to get rid of the default blue color that has a very bad contrast with rest of my website. Aside from using '-webkit-appearance: none;' and restyling things like checkboxes myself I'm not sure if it's possible.
Does anyone experience this issue as well or have a solution or documentation I'm missing?
My preferred solution just uses css. It targets Safari as well as Chrome, but it's already grayscale anyway, so that's OK.
input[type='checkbox']:checked {-webkit-filter: grayscale(100%);}
input[type='radio']:checked {-webkit-filter: grayscale(100%);}
This is Chrome 83 upwards specific - other browsers do other things (grayscale mostly).
This construct seems to work for now - just as long as there is a background color set for "body":
input[type=checkbox] {
mix-blend-mode: luminosity;
}
Examples:
Though I am not sure this will continue to work, it might be good enough as a temporary workaround to alleviate "designer suffering". Disrupted color schemes is a crisis :-).
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Test</title>
<style>
body {
background-color: white;
}
input[type=checkbox] {
mix-blend-mode: luminosity;
}
</style>
</head>
<body>
<label><input type="checkbox" checked>Test</label>
</body>
</html>
Links:
https://www.w3schools.com/cssref/pr_mix-blend-mode.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Pure CSS solution which allows any color while trying to stay close to the new design. Just replace the --primary-color variable. Works in Chromium browsers (Chrome, new Edge) and Firefox.
:root {
--primary-color: #f44336;
}
input[type="checkbox"] {
height: 14px;
width: 14px;
position: relative;
-webkit-appearance: none;
}
input[type="checkbox"]:before {
content: "";
display: inline-block;
position: absolute;
box-sizing: border-box;
height: 14px;
width: 14px;
border-radius: 2px;
border: 1px solid #767676;
background-color: #fff;
}
input[type="checkbox"]:hover::before {
border: 1px solid #4f4f4f;
}
input[type="checkbox"]:checked:hover::before {
filter: brightness(90%);
}
input[type="checkbox"]:checked:disabled:hover::before {
filter: none;
}
input[type="checkbox"]:checked:before {
content: "";
display: inline-block;
position: absolute;
box-sizing: border-box;
height: 14px;
width: 14px;
border-radius: 2px;
border: 1px solid var(--primary-color);
background-color: var(--primary-color);
}
input[type="checkbox"]:checked:after {
content: "";
display: inline-block;
position: absolute;
top: 5px;
left: 2px;
box-sizing: border-box;
height: 5px;
width: 10px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: translateY(-1.5px) rotate(-45deg);
transform: translateY(-1.5px) rotate(-45deg);
}
input[type="checkbox"]:disabled::before {
border: 1px solid #c9ced1;
border-radius: 2px;
background-color: #f0f4f8;
}
input[type="checkbox"]:checked:disabled::before {
border: 1px solid #d1d1d1;
border-radius: 2px;
background-color: #d1d1d1;
}
<input type="checkbox"></input>
<input type="checkbox" checked="checked"></input>
<input type="checkbox" disabled="true"></input>
<input type="checkbox" disabled="true" checked="checked"></input>
Using hue-rotate() filter, one can change the background color of checked checkboxes. For example, this css makes it green:
Input[type=checkbox]:checked{filter:hue-rotate(290deg);}
Now, by adding grayscale, one can make the green color darker:
Input[type=checkbox]:checked{filter:hue-rotate(290deg) grayscale(50%);}
The brightness() filter can also help to adjust the color.
Using invert(), you can get a black checkbox, then add grayscale and brightness to get white background (which looks like a regular checkbox, only, without a border):
Input[type=checkbox]:checked{filter:invert() grayscale(100%) brightness(180%);}
It's so ugly one cannot just update the style of checkboxes :( So you need to really hide native checkbox and insert your custom element using :before
Here is the snippet using Font Awesome (free icon for checkmark \f00c)
input[type="checkbox"] {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
/* Show the border to simulate the square */
border: 1px solid #ccc;
/* Hide the native checkbox */
-webkit-appearance: none;
width: 15px;
height: 15px;
}
input[type="checkbox"]:before {
/* Show some fake element to keep the space for empty "square" */
content: "\f0c8";
color: transparent;
}
input[type="checkbox"]:checked:before {
/* Show actual checkmark */
content: "\f00c";
color: black;
}
<script src="https://kit.fontawesome.com/59ba4e0c1b.js"></script>
<input type="checkbox" checked="">I'm checked
<br>
<input type="checkbox">I'm unchecked
And here is the one with pure Unicode (which still requires some polishing to avoid jumping)
input[type="checkbox"] {
/* Show the border to simulate the square */
border: 1px solid #ccc;
/* Hide the native checkbox */
-webkit-appearance: none;
width: 15px;
height: 15px;
}
input[type="checkbox"]:before {
/* Show some fake element to keep the space for empty "square" */
content: "w";
color: transparent;
}
input[type="checkbox"]:checked:before {
/* Show actual checkmark */
content: "✓";
color: black;
}
<input type="checkbox" checked="">I'm checked
<br>
<input type="checkbox">I'm unchecked
My solution to bring back the grey/black checkboxes, targeting only desktop versions of Chrome >= 83.
if (window.chrome) {
var ua = navigator.appVersion;
if (ua.indexOf('Mobile') === -1) {
var flag = ua.indexOf('Chrome/');
if (flag !== -1) {
var version = parseInt(ua.substr(flag + 7, 2));
if (version >= 83) {
var chromeStyle = document.createElement('style');
chromeStyle.type = 'text/css';
chromeStyle.innerText = 'input[type="checkbox"] {-webkit-filter: brightness(0.9);} input[type="checkbox"]:checked {-webkit-filter: grayscale(100%) invert(100%) brightness(1.3);}';
document.head.appendChild(chromeStyle);
}
}
}
}
This change in widget appearance from Chrome 81 to Chrome 83 really badly affected my Gui, in p5.js. I found a way to revert to Chrome 81 style, I don't know how long it will remain available. Put this in your Chrome address bar ..
chrome://flags/#form-controls-refresh
It brings up a bunch of internal options .. set the Web Platform Controls updated UI ie. the one you land on, to Disabled. Have to then restart the browser. This gets rid of all the "improvements", including the awful bright blue slider mentioned above.
Thanks to a Reddit poster for the info, which I've lost the URL of.
(My environment: Mac, Mojave 10.14.6, Chrome 83.0.4103.106). (Also now 83.0.4103.116, latest at 25 June 2020).
Ciao e Buona Fortuna.
In Chrome 91, maybe you can try the accent-color CSS keyword, which allows web developers to specify the accent color for UI controls (e.g. checkbox, radio button) generated by the element.
The accent-color CSS property is currently experimental. Please enable chrome://flags/#enable-experimental-web-platform-features to test it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<style>
input[type="checkbox"] {
accent-color: red;
}
</style>
<body>
<input type="checkbox" />
</body>
</html>
I thought I was going to need to use -webkit-appearance: none;, but turns out it is not necessary. Also, using JavaScript and/or filter is unnecessary.
Here is where I landed: https://codepen.io/colorful-tones/pen/NWxZpBb
Use:
input[type="checkbox"] {
-webkit-appearance: none;
}
Then just style it the way you want.
As for the checked state you can use :before pseudo element with font icon like Fontawesome or with an image like so:
input[type="checkbox"]:checked:before {
content: '';
width: 14px;
height: 14px;
position: absolute;
background: url(check.png) no-repeat center 3px transparent #ff0000;
}
I'd like to create a button that changes its style when it gets pressed. This is my CSS code:
button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}
button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
<button>Button</button>
It is changed only when I click & hold on it. I want to make it change style after it's pressed. For example, normal state would be white, state while being clicked would be green and after click is released it would be red.
You can do this if you use an <a> tag instead of a button. I know it's not exactly what you asked for, but it might give you some other options if you cannot find a solution to this:
Borrowing from a demo from another answer here I produced this:
a {
display: block;
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
a:active {
font-size: 18px;
border: 2px solid green;
border-radius: 100px;
width: 100px;
height: 100px;
}
a:target {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
<a id="btn" href="#btn">Demo</a>
Notice the use of :target; this will be the style applied when the element is targeted via the hash. Which also means your HTML will need to be this: <a id="btn" href="#btn">Demo</a> a link targeting itself. and the demo http://jsfiddle.net/rlemon/Awdq5/4/
Thanks to #BenjaminGruenbaum here is a better demo: http://jsfiddle.net/agzVt/
Also, as a footnote: this should really be done with JavaScript and applying / removing CSS classes from the element. It would be much less convoluted.
You could use :focus which will remain the style as long as the user doesn't click elsewhere.
button:active {
border: 2px solid green;
}
button:focus {
border: 2px solid red;
}
Should we include a little JS? Because CSS was not basically created for this job. CSS was just a style sheet to add styles to the HTML, but its pseudo classes can do something that the basic CSS can't do. For example button:active active is pseudo.
Reference:
http://css-tricks.com/pseudo-class-selectors/ You can learn more about pseudo here!
Your code:
The code that you're having the basic but helpfull. And yes :active will only occur once the click event is triggered.
button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}
button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
This is what CSS would do, what rlemon suggested is good, but that would as he suggested would require a tag.
How to use CSS:
You can use :focus too. :focus would work once the click is made and would stay untill you click somewhere else, this was the CSS, you were trying to use CSS, so use :focus to make the buttons change.
What JS would do:
The JavaScript's jQuery library is going to help us for this code. Here is the example:
$('button').click(function () {
$(this).css('border', '1px solid red');
}
This will make sure that the button stays red even if the click gets out. To change the focus type (to change the color of red to other) you can use this:
$('button').click(function () {
$(this).css('border', '1px solid red');
// find any other button with a specific id, and change it back to white like
$('button#red').css('border', '1px solid white');
}
This way, you will create a navigation menu. Which will automatically change the color of the tabs as you click on them. :)
Hope you get the answer. Good luck! Cheers.
You can do this with php if the button opens a new page.
For example if the button link to a page named pagename.php as, url: www.website.com/pagename.php the button will stay red as long as you stay on that page.
I exploded the url by '/' an got something like:
url[0] = pagename.php
<? $url = explode('/', substr($_SERVER['REQUEST_URI'], strpos('/',$_SERVER['REQUEST_URI'] )+1,strlen($_SERVER['REQUEST_URI']))); ?>
<html>
<head>
<style>
.btn{
background:white;
}
.btn:hover,
.btn-on{
background:red;
}
</style>
</head>
<body>
Click Me
</body>
</html>
note: I didn't try this code. It might need adjustments.
Maybe :active over :focus with :hover will help!
Try
button {
background:lime;
}
button:hover {
background:green;
}
button:focus {
background:gray;
}
button:active {
background:red;
}
Then:
<button onkeydown="alerted_of_key_pressed()" id="button" title="Test button" href="#button">Demo</button>
Then:
<!--JAVASCRIPT-->
<script>
function alerted_of_key_pressed() { alert("You pressed a key when hovering over this button.") }
</script>
Sorry about that last one. :) I was just showing you a cool function!
Wait... did I just emphasize a code block? This is cool!!!
I'm trying to change the style of a button with an embedded image as seen in the following Fiddle:
http://jsfiddle.net/krishnathota/xzBaZ/1/
In the example there are no images, I'm afraid.
I'm trying to:
Change the background-color of the button when it is disabled
Change the image in the button when it is disabled
Disable the hover effect when disabled
When you click on the image in the button and drag it, the image can be seen separately; I want to avoid that
The text on the button can be selected. I want to avoid that, too.
I tried doing in button[disabled]. But some effects could not be disabled. like
top: 1px; position: relative; and image.
For the disabled buttons you can use the :disabled pseudo class. It works for all the elements that have a disabled API (typically form elements).
For browsers/devices supporting CSS2 only, you can use the [disabled] selector.
As with the image, don't put an image in the button. Use CSS background-image with background-position and background-repeat. That way, the image dragging will not occur.
Selection problem: here is a link to the specific question:
How to disable text selection highlighting
Example for the disabled selector:
button {
border: 1px solid #0066cc;
background-color: #0099cc;
color: #ffffff;
padding: 5px 10px;
}
button:hover {
border: 1px solid #0099cc;
background-color: #00aacc;
color: #ffffff;
padding: 5px 10px;
}
button:disabled,
button[disabled]{
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
div {
padding: 5px 10px;
}
<div>
<button> This is a working button </button>
</div>
<div>
<button disabled> This is a disabled button </button>
</div>
I think you should be able to select a disabled button using the following:
button[disabled=disabled], button:disabled {
// your css rules
}
Add the below code in your page. No changes made to button events, to disable/enable the button simply add/remove the button class in JavaScript.
Method 1
<asp Button ID="btnSave" CssClass="disabledContent" runat="server" />
<style type="text/css">
.disabledContent
{
cursor: not-allowed;
background-color: rgb(229, 229, 229) !important;
}
.disabledContent > *
{
pointer-events:none;
}
</style>
Method 2
<asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" />
<style type="text/css">
.btn-disable
{
cursor: not-allowed;
pointer-events: none;
/*Button disabled - CSS color class*/
color: #c0c0c0;
background-color: #ffffff;
}
</style>
By CSS:
.disable{
cursor: not-allowed;
pointer-events: none;
}
Them you can add any decoration to that button.
For change the status you can use jquery
$("#id").toggleClass('disable');
To apply grey button CSS for a disabled button.
button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
border: 2px outset ButtonFace;
color: GrayText;
cursor: inherit;
background-color: #ddd;
background: #ddd;
}
consider the following solution
.disable-button{
pointer-events: none;
background-color: #edf1f2;
}
For all of us using bootstrap, you can change the style by adding the "disabled" class and using the following:
HTML
<button type="button"class="btn disabled">Text</button>
CSS
.btn:disabled,
.btn.disabled{
color:#fff;
border-color: #a0a0a0;
background-color: #a0a0a0;
}
.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus {
color:#fff;
border-color: #a0a0a0;
background-color: #a0a0a0;
}
Remember that adding the "disabled" class doesn't necessarily disable the button, for example in a submit form. To disable its behaviour use the disabled property:
<button type="button"class="btn disabled" disabled="disabled">Text</button>
A working fiddle with some examples is available here.
When your button is disabled it directly sets the opacity. So first of all we have to set its opacity as
.v-button{
opacity:1;
}
Need to apply css as belows:
button:disabled,button[disabled]{
background-color: #cccccc;
cursor:not-allowed !important;
}
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
// apply css here what u like it will definitely work...
}
And if you change your style (.css) file to SASS (.scss) use:
button {
background-color: #007700;
&:disabled {
background-color: #cccccc;
}
}
On google homepage, if you click the more button, a menu opens below just that button, like this:
How can I do a similar thing with one of the tabs in the navigation bar of my website using css/javascript/jquery?
Edit: To be more specific, I'm wondering how to accomplish the CSS part of this, i.e:
How to make an up/down arrow graphic show on the tab when the dropdown is toggled. (i.e when toggled, show down arrow, when not, up arrow). (Rather than just putting an <img> i'd rather use a background-image to toggle the arrows)
How to have the new list pop down below the tab and aligned with it.
This is an example for one way this could be done. Of course, you can experiment with diff methods and stuff, but this is a basic working solution.
A dropdown element to be toggled by clicking a link is pretty good.
<div id="topBar">
<a href="#" id="more">More
<span id="arrow">
<span id="arrdown">▼</span>
<span id="arrup">▲</span>
</span>
</a>
<div class="dropdown">
One
Two
Three
</div>
</div>
Then you make it toggle with a JS click.
$('#more').click(function() {
$(this).toggleClass('active');
$(this).next('.dropdown').toggle();
return false;
});
$('.dropdown a').click(function() {
return false;
});
css:
body { background: #fee; font-family: calibri; }
#topBar { text-align: right; background: black; color: white; padding: 5px; }
#topBar a { color: white; text-decoration: none; padding: 5px 7px; }
#topBar a:hover { background: #ddd; color: black; }
#topBar a.active { background: white; color: black; }
.dropdown { display: none; position: absolute; right: 5px; background: white; color: black; }
.dropdown a { display: block; color: black !important; text-decoration: none; padding: 5px 7px; }
.dropdown a:hover { background: #ccc; }
#arrup { display: none; }
#arrow { font-size: 0.6em; }
Here's a live example with CSS: http://jsfiddle.net/ZUPBj/
There are many different approaches to this, one of the simplest:
Create a hidden div that get's toggled when the menu item is clicked.
<div class="menu"></div>
<div class="dropDown"></div> <!-- Hidden by default -->
<script>
$(".menu").on("click",function(){
$(".dropDown").toggle();
});
</script>
JsFiddle
Some googling will find you plenty of tutorials online. I searched for "building drop down menus in html". These links below are some of the better tutorials I found.
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/
http://youhack.me/2011/09/18/how-to-build-a-drop-down-menu-enhanced-with-css3/
Basically what they're doing is displaying a hidden div when the user hovers over the first level of the menu.