Input checkbox outline in Chrome behaves itself really odd.
Generally, outline doesn't include margins, but when you set the focus on it with the keyboard (! not the mouse), it starts including margins. For the tag types other than input (as well, as for the other input type) everything works fine (outline never includes margins). In Firefox everything works fine as well.
Here is the JsFiddle to test this:
.error input {
outline: 2px solid #c00;
margin: 2px;
}
.error input[type=checkbox] {
outline: 2px solid #c00;
}
<div class="error">
<input type='checkbox'><label>Some label</label>
<input type='text'>
</div>
http://jsfiddle.net/71ybetjv/
Is this a Chrome bug? And is there any workaround for that?
Chromes default :focus-visible style contains outline-offset: 2px;.
This can be overwritten: (Though it's worth noting that you should replace it with another clear "focused" style for accessibility)
.error input {
outline: 2px solid #c00;
margin: 2px;
}
.error input:focus-visible {
outline-offset: 0;
}
.error input[type=checkbox] {
outline: 2px solid #c00;
}
<div class="error">
<input type='checkbox'><label>Some label</label><br />
<input type='text' />
</div>
Related
I am trying to customize my input forms, but something strange is happening and I can't understand why it is happening.
Here is my HTML:
<input type="text" class="multi-choice" >
<input type="text" class="multi-choice" >
<input type="text" class="multi-choice" >
As you can see I have three input element with a "multi-choice" class.
This is the CSS I made just for testing:
.multi-choice {
background-color: red;
height: 400px;
width: 10px;
border: 10px solid black;
outline: none;
}
What's happening is that CSS is only being applied on background-color and height resulting in huge red input bars. However it is completely ignoring width, border and outline.
When I do the same thing using id instead of class it is working correctly. Why it is happening?
EDIT
According to the answers the code works, so I assume it is something on my pc that is preventing it to work somehow.
I guess everything is working fine with your html and css. Maybe you could not realize your border because you did not give different color
.multi-choice {
background-color: red;
height: 200px;
width: 200px;
border: 10px solid black;
outline: none;
}
<input type="text" class="multi-choice" >
<input type="text" class="multi-choice" >
<input type="text" class="multi-choice" >
The border instruction requires more. Just saying 10px isn't enough.
border: 10px solid black;
Will work better.
I've put together this pen: https://codepen.io/NanoSpicer/pen/YzQgQVd
The idea is that using the sibling selector I want to style a certain element when the element before the one I want to style is focused.
It works great with input elements, but it fails miserably when using elements with contenteditable attribute:
.container,
form {
width: 30%;
display: flex;
flex-direction: column;
gap: 10px;
}
div[contenteditable="true"]::before {
text-color: gray;
opacity: 0.6;
content: attr(placeholder);
}
div[contenteditable="true"],
input {
/* remove system hightlighting*/
outline-style: none;
box-shadow: none;
min-height: 40px;
appearance: none;
border: 3px solid;
border-color: gray;
border-radius: 6px;
}
div[contenteditable="true"]:focus,
input:focus {
border-color: blue;
}
*:focus+* {
border-color: red;
}
<form>
<input placeholder="first" id="first" type="text">
<input placeholder="second" id="second" type="password">
</form>
<div class="container">
<div contenteditable="true" placeholder="first"></div>
<div contenteditable="true" placeholder="second"></div>
</div>
Note: Tested on Firefox and Chrome.
That is very strange. Probably a bug.
This workaround is good for Firefox and Chrome on PC. Didn't test other browsers / platforms.
[contenteditable]:focus + * {
border-color:green;
}
Just like you did for in the beginning of your CSS, be more specific to indicate you want to react with the contenteditable attribute.
By default, div are not editable, so not focusable, so you have to be a bit more specific with this.
To make this work, you should edit the last CSS property to add the second selector line like I wrote here :
*:focus + *,
div[contenteditable="true"]:focus + div {
border-color: red;
}
or if you want to make it more generic:
*:focus + *,
*[contenteditable="true"]:focus + * {
border-color: red;
}
I'm running into an issue where the default blue outline when input fields are focused is not being removed despite trying two CSS techniques to remove the outline. I have tried to use input:focus and input[type="text"]:focus, but neither are removing this outline. What am I possibly doing wrong with my CSS?
Here is my form with the comment-box input:
<div class="comment-form">
<form action="/app/blog/{{this.blogId}}/comment" method="post">
<label for="data-comment">Comment:</label>
<br />
<input type="text" name="comment" class="comment-box">
<button type="submit" class="comment-submit">Comment</button>
</form>
</div>
Here is the CSS (input.comment-box CSS is working):
input.comment-box {
width: 80%;
box-sizing: border-box;
border: 2px solid #D8D8D8;
border-radius: 4px;
}
.comment-box input:focus {
border: 2px solid #D8D8D8;
outline: none !important;
}
.comment-box input:focus means an input box inside the .comment-box class, i.e.,
<div class="comment-box">
<input type="text">
</div>
What you probably want is:
input.comment-box:focus {
outline: none;
}
or just
.comment-box:focus {
outline: none;
}
The problem is with the selector .comment-box input:focus. That will target input:focus inside of .comment-box, which doesn't exist.
The selector either needs to be .comment-box:focus or input:focus or .comment-form input:focus
For this case, input should always come first > class/id > pseudo-class.
input.comment-box:focus {
outline: none;
}
Otherwise
.comment-form input:focus {
outline: none;
}
I can't tell you why it's not working in this case, but I will suggest that you think carefully and read http://www.outlinenone.com/ before you actually remove the outline. It exists so that someone who is not using a mouse can navigate among form inputs and determine which one has focus. It appears that your styles will remove ANY distinction between the focused and unfocused input box. Essentially, this means you are excluding numerous people with disabilities from using your website.
I am new to html/css, I have a textbox while writing an underline comes below the words.once the focus goes off then goes automatically.I want to remove that underline while typing.
I have used text-decoration: none;
and spellcheck="false"
but its not working.
my snippet
<input type="text" spellcheck="false" class="text-line" id="username" name="username" placeholder="Username">
I am also attaching the image.
css
.text-line {
background-color: transparent;
width: 15%;
color: #000000;
outline: none;
outline-style: none;
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid #eeeeee 1px;
text-decoration: none;
padding: 3px 5px;
}
There are several cases:
That class text-line could have declared a selector :focus that puts an underline to your text
The input text could have binded a javascript event that puts an underline to your text when the input is in focus, and remove it when it is not
It worked adding autocomplete="off" autocorrect="off"
in html.
Thanks everyone.
I have a search input field and a submit button direct beside the input field. They have the same padding, but Firefox adds 1px to the button padding, but not to the input padding. Line-height makes it worse. Has anyone a solution for this?
.form,
button {
padding: 5px;
font-size: 12px;
border: 1px solid black;
box-sizing: border-box;
}
<input type="text" class="form" placeholder="Text" /><button class="button">Click</button>
http://jsfiddle.net/r5y7byag/4/
This will fix it
button::-moz-focus-inner {
padding: 0;
border: 0
}
Including the border rule above is necessary for buttons to look the same in both browsers.
It also removes the dotted outline when the button is active in Firefox.
To fix it on the input elements aswell add:
input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner
See this fiddle
CSS:
.form,
button {
font-size: 12px;
border: 1px solid black;
box-sizing: border-box;
line-height:30px;
padding-left:5px;
}