When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it.
For the layout I am working on, this is distracting and does not look right.
<input type="text" name="user" class="middle" id="user" tabindex="1" />
Firefox does not seem to do this, or at least, will let me control it with:
border: x;
If someone can tell me how IE performs, I would be curious.
Getting Safari to remove this little bit of flare would be nice.
Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.
In your case, try:
input.middle:focus {
outline-width: 0;
}
Or in general, to affect all basic form elements:
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):
[contenteditable="true"]:focus {
outline: none;
}
Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:
*:focus {
outline: none;
}
To remove it from all inputs
input {
outline:none;
}
This was confusing me for some time until I discovered the line was neither a border or an outline, it was a shadow. So to remove it I had to use this:
input:focus, input.form-control:focus {
outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
This is an old thread, but for reference it's important to note that disabling an input element's outline is not recommended as it hinders accessibility.
The outline property is there for a reason - providing users with a clear indication of keyboard focus. For further reading and additional sources about this subject see http://outlinenone.com/
This is a common concern.
The default outline that browsers render is ugly.
See this for example:
form,
label {
margin: 1em auto;
}
label {
display: block;
}
<form>
<label>Click to see the input below to see the outline</label>
<input type="text" placeholder="placeholder text" />
</form>
The most common "fix" that most recommend is outline:none - which if used incorrectly - is disaster for accessibility.
So...of what use is the outline anyway?
There's a very dry-cut website I found which explains everything well.
It provides visual feedback for links that have "focus" when
navigating a web document using the TAB key (or equivalent). This is
especially useful for folks who can't use a mouse or have a visual
impairment. If you remove the outline you are making your site
inaccessible for these people.
Ok, let's try it out same example as above, now use the TAB key to navigate.
form,
label {
margin: 1em auto;
}
label {
display: block;
}
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
</form>
Notice how you can tell where the focus is even without clicking the input?
Now, let's try outline:none on our trusty <input>
So, once again, use the TAB key to navigate after clicking the text and see what happens.
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none;
}
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
</form>
See how it's more difficult to figure out where the focus is? The only telling sign is the cursor blinking. My example above is overly simplistic. In real-world situations, you wouldn't have only one element on the page. Something more along the lines of this.
.wrapper {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none;
}
<div class="wrapper">
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
</form>
<form>
First name:<br>
<input type="text" name="firstname"><br> Last name:<br>
<input type="text" name="lastname">
</form>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<form>
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
</form>
<form>
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
</form>
<form>
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Click me</label>
</fieldset>
</form>
</div>
Now compare that to the same template if we keep the outline:
.wrapper {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
form,
label {
margin: 1em auto;
}
label {
display: block;
}
<div class="wrapper">
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
</form>
<form>
First name:<br>
<input type="text" name="firstname"><br> Last name:<br>
<input type="text" name="lastname">
</form>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<form>
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
</form>
<form>
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
</form>
<form>
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Click me</label>
</fieldset>
</form>
</div>
So we have established the following
Outlines are ugly
Removing them makes life more difficult.
So what's the answer?
Remove the ugly outline and add your own visual cues to indicate focus.
Here's a very simple example of what I mean.
I remove the outline and add a bottom border on :focus and :active. I also remove the default borders on the top, left and right sides by setting them to transparent on :focus and :active (personal preference)
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none
}
input:focus,
input:active {
border-color: transparent;
border-bottom: 2px solid red
}
<form>
<label>Click to see the input below to see the outline</label>
<input type="text" placeholder="placeholder text" />
</form>
So, we try the approach above with our "real-world" example from earlier:
.wrapper {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none
}
input:focus,
input:active {
border-color: transparent;
border-bottom: 2px solid red
}
<div class="wrapper">
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
</form>
<form>
First name:<br>
<input type="text" name="firstname"><br> Last name:<br>
<input type="text" name="lastname">
</form>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<form>
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
</form>
<form>
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
</form>
<form>
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Click me</label>
</fieldset>
</form>
</div>
This can be extended further by using external libraries that build on the idea of modifying the "outline" as opposed to removing it entirely like Materialize
You can end up with something that is not ugly and works with very little effort
body {
background: #444
}
.wrapper {
padding: 2em;
width: 400px;
max-width: 100%;
text-align: center;
margin: 2em auto;
border: 1px solid #555
}
button,
.wrapper {
border-radius: 3px;
}
button {
padding: .25em 1em;
}
input,
label {
color: white !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />
<div class="wrapper">
<form>
<input type="text" placeholder="Enter Username" name="uname" required>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</form>
</div>
The only solution that worked for me
The border is actually a shadow. So to hide it I had to do this:
input[type="text"]:focus{
box-shadow: 0 0 0 rgb(255, 255, 255);
}
input[type="checkbox"]:focus{
box-shadow: 0 0 0 rgb(255, 255, 255);
}
Edit 2021: you can now use this: https://github.com/WICG/focus-visible
Removing all focus styles is bad for accessibility and keyboard users in general. But outlines are ugly and providing a custom focussed style for every single interactive element can be a real pain.
So the best compromise I've found is to show the outline styles only when we detect that the user is using the keyboard to navigate. Basically, if the user presses TAB, we show the outlines and if he uses the mouse, we hide them.
It does not stop you from writing custom focus styles for some elements but at least it provides a good default.
This is how I do it:
// detect keyboard users
const keyboardUserCssClass = "keyboardUser";
function setIsKeyboardUser(isKeyboard) {
const { body } = document;
if (isKeyboard) {
body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
} else {
body.classList.remove(keyboardUserCssClass);
}
}
// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
if (e.key === "Tab") {
setIsKeyboardUser(true);
}
});
document.addEventListener("click", e => {
// Pressing ENTER on buttons triggers a click event with coordinates to 0
setIsKeyboardUser(!e.screenX && !e.screenY);
});
document.addEventListener("mousedown", e => {
setIsKeyboardUser(false);
});
body:not(.keyboardUser) *:focus {
outline: none;
}
<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
This is anchor link
<input type="checkbox" />
<textarea>textarea</textarea>
<select/>
I tried all the answers and I still couldn't get mine to work on Mobile, until I found -webkit-tap-highlight-color.
So, what worked for me is...
* { -webkit-tap-highlight-color: transparent; }
:focus-visible
Good news for accessibility - Chrome & Firefox added support for
:focus-visible.
Hiding focus styles is bad practice due to accessibility requirements (keyboard navigation) which makes your websites less accessible.
Use :focus-visible pseudo-class and let the browser to determinate when to apply focus.
:focus-visible /* Chrome */
Note that Firefox supports similar functionality through an older, prefixed pseudo-class:
:-moz-focusring /* Firefox */
button {
color: #000;
background-color: #fff;
padding: 10px 16px;
margin: 10px 0;
border-radius: 4px;
}
button:focus {
box-shadow: 0 0 0 2px #E59700;
outline: 0;
}
button:hover {
background-color: #eee;
}
button.with-focus-visible:focus:not(:focus-visible) {
box-shadow: none;
outline: 0;
}
button.with-focus-visible:focus-visible,
button.with-focus-visible:moz-focusring {
box-shadow: 0 0 0 2px #E59700;
outline: 0;
}
<p>Click on the button using a mouse. Then try tabbing to the button.</p>
<button>without :focus-visible</button>
<button class="with-focus-visible">with :focus-visible</button>
docs: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
w3 specifications: https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo
You could use CSS to disable that!
This is the code I use for disabling the blue border:
*:focus {
outline: none;
}
This is a working example
Use this code:
input:focus {
outline: 0;
}
In Bootstrap 4 to remove border outline you can use shadow-none, it will remove focus outline.
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" class="form-control form-control shadow-none"
id="exampleInputEmail1"aria-describedby="emailHelp">
</div>
The textarea on focus may have box-shadow.. It can be removed like so:
textarea:focus{
outline: none!important;
box-shadow: none!important;
}
You can try this also
input[type="text"] {
outline-style: none;
}
or
.classname input{
outline-style: none;
}
None of the solutions worked for me in Firefox.
The following solution changes the border style on focus for Firefox and sets the outline to none for other browsers.
I've effectively made the focus border go from a 3px blue glow to a border style that matches the text area border. Here's some border styles:
Dashed border (border 2px dashed red):
No border! (border 0px):
Textarea border (border 1px solid gray):
Here is the code:
input:focus, textarea:focus {
outline: none; /** For Safari, etc **/
border:1px solid gray; /** For Firefox **/
}
#textarea {
position:absolute;
top:10px;
left:10px;
right:10px;
width:calc(100% - 20px);
height:160px;
display:inline-block;
margin-top:-0.2em;
}
<textarea id="textarea">yo</textarea>
You can remove the orange or blue border (outline) around text/input boxes by using: outline:none
input {
background-color: transparent;
border: 0px solid;
height: 20px;
width: 160px;
color: #CCC;
outline:none !important;
}
try this css, it work for me
textarea:focus, input:focus{ border: none; }
Remove the outline when focus is on element, using below CSS property:
input:focus {
outline: 0;
}
This CSS property removes the outline for all input fields on focus or use pseudo class to remove outline of element using below CSS property.
.className input:focus {
outline: 0;
}
This property removes the outline for selected element.
Try this:
*:focus {
outline: none;
}
This would affect all your pages.
In case the above solutions din't work, you might be using the bootstrap and therefore the .form-control class is applying box-shadow css property to your input field by default.
The solution will be:
.form-control {
box-shadow: none;
}
You should actually not use outline: none because if someone is using a high-contrast view then they will not be able to see the state change on a dark backgroud. Instead, you should use:
outline-color: transparent;
I hate css, I really do. I think this one will be trivial for most of you so please help me with this one.
I would like to create a radiobutton which have to change the background color of the label it's in. Here's the code which obviously does not work:
js:
<div className="container">
<label className="check" htmlFor="id">
<input {...radio.input} name="radio" type="radio" id="id" />
</label>
</div>
and css:
.check {
background-color: green;
display: inline-block;
height: 34px;
position: relative;
width: 60px;
cursor: pointer;
}
.check input {
display:none;
}
input[type="radio"]:checked + .check {
background-color: blue;
}
.container {
margin: 0 auto;
}
The + selector in CSS selects the next element in the HTML. Doing input + label is not going to work because your input is wrapped in the label.
The easiest solution for this would be to apply a checked CSS class in react when the input is checked. The other option would be to place the label AFTER the input in your markup, but that will probably require you to apply more CSS to get the appearance you need.
I really love CSS, I really do! ;)
Change your HTML to:
<div className="container">
<input {...radio.input} name="radio" type="radio" id="id" />
<label className="check" htmlFor="id">
</label>
</div>
and style the radio button individually.
I am trying to edit the way radio buttons appear in CSS and trying to do it with the label encompassing the button and not using the label for function.
In other words, I don't want to use this:
<input type="radio" name="rb" id="rb2" />
<label for="rb2">Hello</label>
I want to use this:
<label><input type="radio" name="rb" />Hello</label>
The reason for this is that the HTML is dynamically generated and I cannot create an id or other field in the input. When I add the css to modify the button/text it doesn't work because it requires the label to be on the text only and "for" to be used. Here is the CSS:
.container{
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
font-family: 'Lato', sans-serif;
font-size:18px;
border:2px
solid #ccc;
overflow-y: scroll;
resize: both;
}
.container input[type=radio]:checked ~ .check {
border: 5px solid #0DFF92;
}
.container input[type=radio]:checked ~ .check::before{
background: #0DFF92;
}
.container input[type=radio]:checked ~ label{
color: #0DFF92;
}
It works if I put the
<div class="container>
<input type="radio" name="rb" value="Hello" id=rb2"/>
<label for="rb2">Hello</label>
<input type="radio" name="rb" value="Goodbye" id="rb3"/>
<label for="rb3">Goodbye</label>
</div>
But not with
<div class="container>
<label> <input type="radio" name="rb" value="Hello">Hello</label>
<label><input type="radio" name="rb" value="Goodbye">Goodbye</label>
</div>
Any suggestions? Thank you so much!
You would have to use javascript. You can't navigate back up the dom tree in css, so since you want the input to be inside the label and the css to affect the label based on the the input, you'd have to use js to detect the change and apply the styling to its parent.
I am trying to style a group of radio buttons and also have the animation work. You will see if I delete the <div> with class="group55" from the code, then the animation works just fine. When I add that element back in, it seems like the CSS I have is not being recognized any longer. What am I doing wrong? The ultimate goal would be to have the "group55" <div> surround the group of radio buttons and still have the animation keep working.
.toggle1:checked ~ .panel1 {
left: 0px;
}
.panel1 {
transition:all 500ms ease;
width: 300px;
height: 100px;
border: 1px solid black;
position: absolute;
left: -300px;
}
<div class="group55">
<input type="radio" class="toggle1" id="toggle1" name="group" checked/>
<input type="radio" class="toggle2" id="toggle2" name="group" />
<div class="panel1">
panels 1
</div>
(Also available at jsFiddle.)
This not work because you need to put the panel as sibling of the input, to make the sibling selector (~) work.
Fix HTML:
<div class="group55">
<input type="radio" class="toggle1" id="toggle1" name="group" checked />
<input type="radio" class="toggle2" id="toggle2" name="group" />
<div class="panel1">
panels 1
</div>
</div>
Check: https://jsfiddle.net/lmgonzalves/85f57nd8/1/
If you try to add the "group55" surround the group of radio buttons,your animation will not work.Click here to see you code again the code that you wish to do
Because the class ".toggle1:checked ~ .panel1" will only work when the ".toggle1" is checked and both ".toggle1" class and ".panel1" class must have inside the "group55" like this.....
<div class="group55">
<input type="radio" class="toggle1" id="toggle1" name="group" checked />
<input type="radio" class="toggle2" id="toggle2" name="group" />
<div class="panel1">
panels 1
</div>
</div>
Click here to see the answer with another way
Something i also did was setting the left property of your panel 1 class to 4px and it worked, because in css properties like left and right work in opposite way so when you said left -300px it's actually the left but normally it ought to go right. Check http://jsfiddle.net/85f57nd8/4/
.toggle1:checked ~ .panel1 {
left: 0px;
}
.panel1 {
transition:all 500ms ease;
width: 300px;
height: 100px;
border: 1px solid black;
position: absolute;
left: 4px;
}
I have a form and I am trying to make a row "justified" so the entire row (which is a 4 textboxes and labels) to fit an exact pixel width (lets say 800px). Normally, if i just lay it out without any special css, It is less than 800px. I want to "stretch" it to be 800px. I don't care if I have to stretch the textboxes or the spaces in between them.
This is similar to justified layout in MS word if that helps describe what i am looking for. Is this possible within html / css in a form layout?
You basically need text-align-last: justify which specifies the justification of the "last text line" in a block element, this defaults namely to the standard direction, which is left in LTR.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 15994654</title>
<style>
#fields {
width: 1000px;
border: 1px solid gray;
}
.justified {
text-align-last: justify;
}
</style>
</head>
<body>
<p id="fields" class="justified">
<label for="input1">label1</label>
<input id="input1" />
<label for="input2">label2</label>
<input id="input2" />
<label for="input3">label3</label>
<input id="input3" />
<label for="input4">label4</label>
<input id="input4" />
<p>
</body>
</html>
This works in IE and Firefox (for older Firefox versions, add -moz-text-align-last: justify if necessary), however this fails in Webkit based browsers (Chrome/Safari). To cover those browser as well, you'd need to replace .justified as follows, so that the last line doesn't appear as a "last line" anymore, so that text-align: justify can do its job the usual way:
.justified {
text-align: justify;
}
.justified:after {
content: '';
display: inline-block;
width: 100%;
}
Note that the text-align-last: justify becomes redundant this way.
Here's the jsfiddle demo.
Actually, there's a very natural way to do this with pure CSS using text-align: justify;.
You didn't succeed because justification doesn't work for the last line (and when there's only one line, it's considered to be the last). There's a CSS3 property that sets text alignment for the last line: text-align-last. Unfortunately, it is not broadly supported.
The solution is to spawn an extra element that will drop to next line, then the first line will be justified:
<form>
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
</form>
form {
width: 800px;
text-align: justify; /* Can we really make this work? Sure! */
}
input {
display: inline-block; /* making elements respect text-align */
}
form:after {
content: ""; /* creating a hidden element that drops to next line */
display: inline-block; /* making it respect text-align and width */
width: 100%; /* forcing it to drop to next line */
}
Demo: http://jsbin.com/ituroj/5/ (click "edit" in top right corner to fiddle with the code).
Result: semantic, no HTML footprint, minimal CSS code, full browser support.
One approach would be:
input[type=text] {
width: 25%;
box-sizing: border-box;
}
Or, if the fields are really inside a <table/> like in this Fiddle, you can set the width of the textboxes to 100%, so the table controls the width:
input[type=text] {
width: 100%;
box-sizing: border-box;
}
You can do it by nesting the input and labels inside of 'columns' that you determine the width of by percentage - this way you can control the width of the form and the inputs will stay justified.
HTML
<form>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4 last">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
</form>
CSS
form{
width:800px;
}
.col4{
width:23.5%;
margin-right:2%;
float:left;
}
.last{
margin:0;
}
.inputWrapper{
width:100%;
}
.textInput{
border:1px solid #ccc;
display:block;
padding:5px;
}
.textInput input{
width:100%;
border:none;
padding:0;
}
You can see a jsFiddle example here http://jsfiddle.net/patricklyver/4mbks/
You can combine float with box-sizing. You will have to float, because forms have different weirdness around them in different browsers. For example in Safari on OS X there is always a hidden 1px padding on the top.
JSfiddle
HTML
<form id="myForm">
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<div class="clear"></div>
</form>
CSS
#myForm {
border: 1px solid blue;
width: 800px;
}
#myForm input[type=text] {
margin: 0px;
display: block;
float: left;
box-sizing: border-box;
width: 25%;
border: 0px;
background-color: orange;
}
#myForm .clear {
clear: both;
}