Is it possible to change the layout of a checkbox without adding the label tag in CSS?
Things like this do not have any effect:
input[type=checkbox][disabled] {
background-color: green;
border: 10px solid red;
}
The only thing I found so far is how to change the opacity.
I'm not sure if this will be much use to you, but it does allow you to "style up" a checkbox without the need for a label. I've remove the disabled flag so you can swap between the different styles. Shouldn't be difficult to add it back in if this will work for you.
Fiddle is here.
input[type=checkbox]:checked:before {
background-color: green;
border: 10px solid red;
}
input[type=checkbox]:before {
content:'';
display:block;
height:100%;
width:100%;
border: 10px solid green;
background-color: red;
}
The above only works on Chrome, however, it seems like Chrome is in the wrong where the specification is concerned.
A fuller answer here: CSS content generation before or after 'input' elements
As of today there is no solution, if we assume a cross browser functional styling, to style the <input type="checkbox" > alone, other than a few properties like opacity, width, height, outline (and maybe a few more).
Using a label (or other content elements) is what you need to do that and here is a good (which this question is likely a duplicate of) post with lots of options: How to style checkbox using CSS?
Note: If you know more properties, feel free to update this answer.
I'm trying to use CSS currentColor as a border-color to generate CSS triangles using :after content. This works great in all browsers I've tried, except one: Safari seems to be caching the currentColor from the first triangle it generates, and then using that everywhere.
Here's what I'm seeing -- expected behavior from Chrome (and Firefox, and IE9+):
Incorrect behavior from Safari 8.0.4 on Yosemite 10.10.2 (same on iOS 8.2) -- notice all three triangles are red, not the currentColor of their elements:
Here's a fiddle with the full code demonstrating the problem.
The relevant CSS:
span {
display: inline-block;
border-bottom: 2px solid currentColor;
}
span::after {
/* Generate a triangle (based on Foundation's css-triangle mixin) */
content:"";
display: inline-block;
width: 0;
height: 0;
border: inset 0.4em;
/* Safari seems to cache this currentColor... */
border-color: currentColor transparent transparent transparent;
border-top-style: solid;
}
.red { color: #c00; }
.blue { color: #009; }
The HTML is simple:
<div>
<span class="red">Red</span>
<span>Default</span>
<span class="blue">Blue</span>
</div>
Is this a bug in Safari? A matter of interpretation on the CSS spec?
More importantly, any suggestions for working around this? I'd hate to have to explicitly declare the color in separate :after rules for each element. (Using currentColor really simplifies maintenance as our other CSS changes.)
So, this turns out to be an actual Safari bug (which might be fixed soon).
I was able to work around it using this suggestion that border-color defaults to currentColor. Replace this:
border-color: currentColor transparent transparent transparent;
with expanded properties that avoid mentioning currentColor:
/* border-top-color: currentColor; is the default behavior */
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
and the problem goes away in Safari (and it still works in the other browsers).
Even I faced a similar issue, so i have to go with a small js trick.
With this trick we can use the currentColor attribute to be set correctly in the desired elements. but it can be achieved only for normal elements. so i moved the pseudo elements into normal elements.
You have to force safari to redraw elements to achieve this. To achieve redrawing elements simply hide and show it.
var nodeStack =[element];
while (node = nodeStack.pop()) {
if (node.nodeType == 1) {
node.style.display="none";
node.style.display="";
var i = node.childNodes.length;
while (i--) {
nodeStack.push(node.childNodes[i]);
}
}
}
Check this simple codepen (Your code with little modification)
and also read this for brief info
Pseudo elements cannot be achieved through this trick. You have to move that into a span or some other element.
This click indicator is a disgusting piece for my recent web projects.. I hate this! - How can I say to my Firefox browser that he should not mark the clicked object?
Provided that your menu items are not input elements (say, buttons), you can hide it using CSS, like so:
element { outline: none; }
a {
outline: none;
}
Nothing helped (Firefox 20.1) until this:
a:focus, a:active,
button,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
outline: none !important;
}
this is more accurate:
a { outline: none!important; }
To be more specific to #ioannis-karadimas, you could remove the outline on hover (assuming mouse input) but leave it for focus (assuming keyboard input). This would retain most of the accessibility. That being said:
element:hover { outline: none; }
element:focus { // leave the focus }
Based on this post, adding outline:0 will also do the trick.
.selector{ outline:0; }
If you don't want to have the border shown to any element in your website, try the following,
:focus { outline:none; }
::-moz-focus-inner { border:0; }
You might hate it, but your customers might not. Generally speaking overriding browser functionality is a great way to confuse users and inspire them not to visit your site.
Crazy solution:
input[type="button"]::-moz-focus-inner{
border: 1px dotted transparent;
}
but I dislike it.
Indeed Firefox 12.0 is marking a dotted on input type="button" when I click it. outline:none does nothing for :active, :focus, ...
I can't figure this one out. I'm trying to get rid of that blue glow when textarea is highlighted in Firefox.
Here's my CSS:
textarea
{
margin:0;
padding:0;
width: 598px;
height: 600px;
resize: none;
outline: none;
}
:focus {
outline:0;
outline:none;
}
It removes it in Safari, but I'm have no luck with Firefox.
Thanks!
Matt
how about
*:focus {outline:0px none transparent;}
You can remove it with -moz-appearance:none;, though that may affect the whole appearance more than you're wanting.
If you use this on the textarea style:
outline:none;
... it should work with all browsers, not just Firefox
I'm fairly sure that's a Mac OS X theme-specific behaviour.
Just add or define a border... for instance, if a border is defined and I've added outline: none; to my CSS, this does the trick.
I just had an issue with this on a text input- Firefox was using the border property to create the blue glow on :focus - not outline.
input:focus, textarea:focus {
outline: none; // for other browsers
border: none; // only necessary if you haven't set a border on the element
}
You cannot remove the glow in Firefox I think.. Only way to do that would be by adding a custom border to your element, like border: 1px black;, that would make the input box have no glow at all.
Only popular browsers which allows the outline tag are Safari and Chrome (not sure about linux browsers).
on #3
#Solution0:focus{
border:solid #CCC 1px;
outline:1px none transparent;
}
The better way to fix this, in my opinion, is define a custom border and :focus behavior.
textarea {
margin:0;
padding:0;
width: 598px;
height: 600px;
resize: none;
outline: none;
border: none;
}
textarea:focus {
outline: none;
border: none;
}
Slightly unrelated but possibly helpful answer: In my case the blue glow was causing an alignment problem in Firefox only since it adds an extra pixel or two and changes the overall element size. My guess is a lot of people will arrive at this question for similar reasons and rather than remove the blue glow altogether, the solution I came to was to style the input element padding in specifically for Firefox:
#-moz-document url-prefix() {
input:focus {
padding: 5px!important;
}
}
You can change this to suite your needs but it may be helpful for some of you to know about the #-moz-document url-prefix() rule.
I can make Firefox not display the ugly dotted focus outlines on links with this:
a:focus {
outline: none;
}
But how can I do this for <button> tags as well? When I do this:
button:focus {
outline: none;
}
the buttons still have the dotted focus outline when I click on them.
(and yes, I know this is a usability issue, but I would like to provide my own focus hints which are appropriate to the design instead of ugly grey dots)
button::-moz-focus-inner {
border: 0;
}
No need to define a selector.
:focus {outline:none;}
::-moz-focus-inner {border:0;}
However, this violates accessibility best practices from the W3C. The outline is there to help those navigating with keyboards.
https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples
If you prefer to use CSS to get rid of the dotted outline:
/*for FireFox*/
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
{
border : 0;
}
/*for IE8 and below */
input[type="submit"]:focus, input[type="button"]:focus
{
outline : none;
}
The below worked for me in case of LINKS, thought of sharing - in case someone is interested.
a, a:visited, a:focus, a:active, a:hover{
outline:0 none !important;
}
Cheers!
:focus, :active {
outline: 0;
border: 0;
}
[Update] This solution doesn't work anymore. The solution that worked for me is this one https://stackoverflow.com/a/3844452/925560
The answer marked as correct didn't work with Firefox 24.0.
To remove Firefox's dotted outline on buttons and anchor tags I added the code below:
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: 0;
outline : 0;
}
I found the solution here: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html
Tried most of the answers here, but none of them worked for me. When I realized that I have to get rid of the blue outline on buttons on Chrome too, I found another solution. Remove blue border from css custom-styled button in Chrome
This code worked for me on Firefox version 30 on Windows 7. Perhaps it might help somebody else out there :)
button:focus {outline:0 !important;}
This will get the range control:
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
input[type=range]::-moz-focus-outer {
border: 0;
}
From: Remove dotted outline from range input element in Firefox
There's no way to remove these dotted focus in Firefox using CSS.
If you have access to the computers where your webapplication works, go to about:config in Firefox and set browser.display.focus_ring_width to 0. Then Firefox won't show any dotted borders at all.
The following bug explains the topic: https://bugzilla.mozilla.org/show_bug.cgi?id=74225
There is many solutions found on the web for this, many of which work, but to force this, so that absolutely nothing can highlight/focus once a use the following:
::-moz-focus-inner, :active, :focus {
outline:none;
border:0;
-moz-outline-style: none;
}
This just adds that little bit extra security & seals the deal!
Simply add this css for select box
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
This is working fine for me.
Tested on Firefox 46 and Chrome 49 using this code.
input:focus, textarea:focus, button:focus {
outline: none !important;
}
Before (white dots are visible )
After ( White dots are invisible )
If you want to apply only on few input fields, buttons etc. Use the more specific code.
input[type=text] {
outline: none !important;
}
I think you should really know what you're doing by removing the focus outline, because it can mess it up for keyboard navigation and accessibility.
If you need to take it out because of a design issue, add a :focus state to the button that replaces this with some other visual cue, like, changing the border to a brighter color or something like that.
Sometimes I feel the need to take that annoying outline out, but I always prepare an alternate focus visual cue.
And never use the blur() js function. Use the ::-moz-focus-inner pseudo class.
In most cases without adding the !important to the CSS code, it won't work.
So, do not forget to add !important
a, a:active, a:focus{
outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}
Or any other code:
button::-moz-focus-inner {
border: 0 !important;
}
button::-moz-focus-inner { border: 0; }
Where button can be whatever CSS selector for which you want to disable the behavior.
You might want to intensify the focus rather than get rid of it.
button::-moz-focus-inner {border: 2px solid transparent;}
button:focus::-moz-focus-inner {border-color: blue}
Remove dotted outline from links, button and input element.
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: 0;
outline : 0;
}
If you have a border on a button and want to hide the dotted outline in Firefox without removing the border (and hence it's extra width on the button) you can use:
.button::-moz-focus-inner {
border-color: transparent;
}
The CSS code below works to remove this:
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: 0;
outline : 0;
}
It looks like the only way to achieve this is by setting
browser.display.focus_ring_width = 0
in about:config on a per browser basis.
This works on firefox v-27.0
.buttonClassName:focus {
outline:none;
}
After trying many options from the above only the following worked for me.
*:focus, *:visited, *:active, *:hover { outline:0 !important;}
*::-moz-focus-inner {border:0;}
Along with Bootstrap 3 I used this code. The second set of rules just undo what bootstrap does for focus/active buttons:
button::-moz-focus-inner {
border: 0; /*removes dotted lines around buttons*/
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
outline:0;
}
NOTE that your custom css file should come after Bootstrap css file in your html code to override it.
Yep don't miss !important
button::-moz-focus-inner {
border: 0 !important;
}
You can try button::-moz-focus-inner {border: 0px solid transparent;} in your CSS.