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 have a textbox and when I enter the term "laptop" its not visible properly. The problem is in IE9, not with Chrome.
HTML
<input id="small_search_string_sub" name="search_string" type="text" class="newsearch_sub rounded " placeholder="Search..." maxlength="500">
Here is the CSS:-
.newsearch_sub {
padding: 3px 10px 3px 10px;
background-color: #FFF;
width: 220px;
height: 25px;
margin-top: 10px;
vertical-align: top;
}
It seems like you have no reset for the input default style, also the input has not format for the text on it, also the padding might be pushing down the text to far.
I tried this, and it seems to work well on IE9 for me, but the fact that I see another class (rounded) on the line of code that you send, makes me wonder if there is not something missing here, can you put a link to the code, even as a stand alone page, this way I can debug on ie9 on the proper code, and maybe give you a solution if this one does not work for you.
.newsearch_sub {
padding: 3px 10px 3px 10px;
background-color: #FFF;
width: 220px;
height: 25px;
margin-top: 10px;
vertical-align: top;
font:12px/24px Arial,Helvetica
}
I have a textbox of which by I removed the default borders using outline:none; However, when I add a background-image the border is shown and can't be removed!
How do I get rid of this? Here is the box:
<input type = "text" placeholder = "Username" class = "txt_input">
and the css:
background: url('images/user-icon.png') left no-repeat;
margin-bottom: 5px;
box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
font-family: 'ProximaNova-Bold';
outline: none;
width: 200px;
height:30px;
text-align: center;
text-transform: capitalize;
padding:15px;
padding-left:21px;
add a border: 0px none; to your css? The outline handles only the focus border.
Use border:none instead of outline:none. Also, to capitalize text, use text-transform:uppercase. Note: you will remain with a little border, because of the box-shadow you applied. Removing this also will leave you with no border.
Cheers.
I think border: transparent; is better choice.
You have tried this border:0; on your CSS style??
i use 'vscode' and on mine i had to combine (below)
*
border: none;
outline: none;
*
copy that and it should work hopefully
I have an issue and I can't seem to either find the answer here or solve it myself. The textboxes seem to have by default approx. 10px over and below the actual textbox. I've tried setting the margin and the padding to 0 but nothing the space remains.
I want that textbox to be right over the element that is below it, using margin to move it causes it to push the div below it lower so it doesn't really help. Any idea how I can get rid of that whitespace?
Markup:
<div class="span-8 last">
<label for="VoicenoteSearch"></label>
<input name="data[Voicenote][search]" type="text" class="input-text long" style="margin-top:10px;margin-left:-10px" placeholder="Search" id="VoicenoteSearch">
</div>
Relevant CSS:
label {
display: block;
}
input.input-text {
border-color: #b9b9b9;
border-width: 2px;
position: relative;
z-index: 2;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom: 8px;
padding: 5px;
}
.input-text.long {
width: 320px;
}
JSFiddle: http://jsfiddle.net/pyQ5T/
Even if I remove all the CSS those spaces are there, it seems it's part of the textbox by default
Try adding these CSS properties:
padding:0px;
margin:0px;
float: left;
I'm trying to make a simple search form on my website and I'm using the input HTML element. But it is acting really weird.
It gets resized by the browser no matter which size I specify in the style. In the example below I've got an input element with the width of 180px, but the browser renders it as 147px. :/
Do you know what could be the problem?
Here's a video example and the code below: http://screencast.com/t/WwqAQDmofhf
<div id="search" style="background-color:#000; height:100px;">
<input style=" background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
border-radius: 5px 5px 5px 5px;
color: #666666;
float: left;
line-height: normal;
margin: 6px;
padding: 6px 27px 6px 6px;
width: 180px;
z-index: 40;"
type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" />
</div>
The meaning of 'width' depends on the page's box model. Traditionally width has included paddings and borders, but the standard model now excludes them.
If you do not have a correct doctype in your html, then most browsers would default to traditional box model, and you would be left with a box of 147px. Adding a doctype would fix it and force other layout to be standard-compliant.
<!DOCTYPE html>
<html><head><body>
<div id="search" style="background-color:#000; height:100px;">
<input style=" background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
border-radius: 5px 5px 5px 5px;
color: #666666;
float: left;
line-height: normal;
margin: 6px;
padding: 6px 27px 6px 6px;
width: 180px;
z-index: 40;"
type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" />
</div></body></html>
It's probably to do with:
padding: 6px 27px 6px 6px;
27px of right padding + 6px of left padding + 147px of reported width = 180px
Have you tried it with Javascript turned off in your browser?
Does it happen in this example?