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>
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 want to remove textbox outline in bootstrap 4 but its not working. How can I remove this line?
CSS
#content #main-content input[type=text]{
border: 0;
border: 1px solid #ccc;
height: 40px;
padding-left: 10px;
outline: 0;
}
html
<div class="form-group">
<label for="title">Title <span>*</span></label>
<input type="text" class="form-control" id="title" name="title" placeholder="Enter Title">
</div>
You can add the shadow-none Bootstrap class to remove the focus outline:
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control shadow-none" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
The theme you're using sets box-shadow to inset 0 -2px 0 #2196F3 on focus.
You need to override it, but not with none, because that would just remove it. You probably want it to remain at same value like when it's not focused. In short, you need this:
textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
box-shadow: inset 0 -1px 0 #ddd;
}
Also note you need to load this CSS after Bootstrap CSS and the theme you're loading.
As the accepted answer works it isn't the best option.
You could simply override the input/button outline by editing the variables. (As the question specifically asks for bootstrap 4)
If you override the Bootstrap 4 variables like so. You could use the following code to disable all focus outlines:
$input-btn-focus-box-shadow: none;
$input-btn-focus-width: 0;
For only disabling the button focus outline use the follow code:
$btn-focus-box-shadow: none;
This you could also be done for indicators, select, dropdown etc. Just search the default variables list of bootstrap 4
EDIT
Also works for v5: Github variables
Even though you can disable the focus outline, it isn't a best practice. Conform the web accessibility keyboard standards a site should be useable by tabbing. By disabling the CSS you disable this functionality.
To separate these users there is a new pseudo class: :focus-visible which you can use however it's not compatible everywhere yet. Chromium changelog
You have to remove your box-shadow on input:focus.
Write this css in your custom css file below the bootstrap css to override. It will be good practice if you use your custom parent class.
.parent-class .form-group input[type=text]:focus,
.parent-class .form-group [type=text].form-control:focus, {
box-shadow: none;
}
This is better and shorter:
input[type="text"], textarea {
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
A very simple solution would be like this,
form .form-control:focus{
border-color: #0d6efd;
box-shadow: none;
}
we overwrite the .form-control bootstrap class.
I was facing the same issue I solved it using this trick in such a way that we don't have to think about importing CSS after bootstrap or something like that.
Note: #0d6efd is the color I wanted to give to my input element when it gets focused.
Using a box-shadow will not completely hide the outline in the button, and it doesn't work on inputs, text-boxes and other form controls...
Using the shadow-none will may have a slight and thin border, but it is much better than the former solution...Here's the code if you need assistance:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<form action="/search" method="get">
<center class="container">
<div class="input-group mb-3">
<input type="text" class="form-control shadow-none" placeholder="Search the web" aria-label="Username" aria-describedby="basic-addon1" required name="q" autocomplete="off">
<input type="submit" class="btn input-group-text shadow-none" id="basic-addon1" value="search">
</div>
</center>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
If you are theming in scss
$input-btn-focus-box-shadow: none;
The below code just worked for me now and I sure do hope it helps somebody else too ..
.form-group input:focus{
outline:0px !important;
box-shadow: none !important;
}
This one line, taken from #tao works when adding a css style:
The inset, however, should be zero. (It will create a weird line in the latest Bootstrap 4.)
<input type="radio" style="box-shadow: inset 0 0 0 #ddd;">
'shadow-none' is not working anymore.
You just have to add
box-shadow: none
on focus event in CSS.
For example.
.box_style:focus{
border:none;
box-shadow:none;
}
Try the !important property in any css code. That will not overwrite other css.
Try this:
//for normal text box
input[type=text]{
border: 0 !important;
height: 40px;
padding-left: 10px;
outline: 0 !important;
}
//for selected/active text box
input[type=text]:focus{
border: 0 !important;
outline: 0 !important;
}
//for hovered text box
input[type=text]:hover{
border: 0 !important;
outline: 0 !important;
}
Add this on input: focus
-webkit-box-shadow: none;
box-shadow: none;
outline: -webkit-focus-ring-color auto 0px;
background-color: rgb(250,250,250);
As far as I see from your css, you set the border to 0 then again to 1. Replace it as below
#content #main-content input[type=text]{
border: 1px solid #ccc;
border: 0;
height: 40px;
padding-left: 10px;
outline: 0;
}
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.
input:required{
background-color:#f00;
}
input:required label{
color: #FF3434;
}
I have the above CSS code currently for my form,
I want to be able to make the label red when the field is required. My input field is:
<label for="frmComTelephone">Telephone</label>
<input type="number" name="Telephone" id="frmComTelephone"/>
<label for="frmIn1IncinTime">Time</label>
<input type="text" name="Incident Time" id="frmIn1IncinTime" required="required"/><br>
But that CSS isn't working how do I solve this?
2ND problem is I have the following CSS:
input:focus
{
background-color:yellow;
}
input[type="text"], input[type="date"],input[type="time"],input[type="number"],textarea,select
{
border-radius:5px;
border-width: 1px;
border-style: solid;
border-color: #C6C6C6;
height:41px;
background-color: #FF3434;
width: 100%;
}
But when the item is focused it doesn't change to yellow, if i remove "background-color: #FF3434;" it turns yellow on focus?
Is what I am doing not able to be done? Or am I going about this wrong?
Thanks
Issue 1:
input:required label{
color: #FF3434;
}
This won't work because the label is not a child of the input. They're siblings. To solve that you have to create a class and attach it to your label:
label.required { color: #FF3434; }
<label for="frmComTelephone" class="required">Telephone</label>
Issue 2:
Try this:
input:focus,
textarea:focus,
select:focus
{ background-color: yellow !important; }
...
UPDATE
If you're more comfortable without using !important then try this:
input[type="text"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus
{ background-color: yellow }
OR
if you have an id on your form this will also work
#formID input:focus,
#formID textarea:focus,
#formID select:focus
{ background-color: yellow }
You need to put the input:focus rule behind the input[type="number"] rule or use input[type="number"]:focus.
Otherwise its overwritten by input[type="number"] as it's more specific.
Problem 2:
CSS selectors by attribute, like input[type="number"] and pseudo-elements like :focus have equal specifity. This means that your input:focus rule gets overridden by the following input[type="number"] background.
There are two ways to fix this:
Higher specifity in the first selector:
form input:focus
{
background-color:yellow;
}
input[type="text"]
{
background-color: #FF3434;
}
Better: Correct rule order, more important one comes second
input[type="text"]
{
background-color: #FF3434;
}
form input:focus
{
background-color:yellow;
}
CSS specifity seems hard, but it's worth understanding it properly. There are a lot of resources about it, try this introduction: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/