CODEWITHSUNDEEP
htmlcssbootstrap-4
Sandeep
Sandeep

Reputation: 1053

How to remove outline in bootstrap 4

I want to remove textbox outline in bootstrap 4 but its not working. How can I remove this line?

enter image description here

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>

Upvotes: 59

Views: 153635

Answers (15)

Hashim Aziz
Hashim Aziz

Reputation: 6062

After spending literal hours digging into developer tools trying to fix the same issue for Bootstrap 5.2 accordion buttons, including at least one trying to set $accordion-button-focus-box-shadow: none before realising it wasn't going to work, I eventually fixed this with:

$accordion-button-focus-box-shadow: inset 0 -1px 0 var(--bs-border-color);

This essentially takes the approach of tao's answer - setting the box-shadow as close as possible to the current setting instead of disabling it entirely - and applies it to SASS so it can be done at build time rather than trying to override it in the CSS.

It also makes the change application-wide so is a lot faster and lighter than setting shadow-none on every element that has a box shadow.

Upvotes: 0

ghanshyam
ghanshyam

Reputation: 35

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;
}

Upvotes: 0

Muhammad Ahmad
Muhammad Ahmad

Reputation: 11

You just have to add box-shadow: none on focus event in CSS. For example.

.box_style:focus{
       border:none;
       box-shadow:none;
   }

Upvotes: 1

Arjun Praveen
Arjun Praveen

Reputation: 117

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Upvotes: 2

soraku02
soraku02

Reputation: 340

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.

Upvotes: 3

Yazeed Zaid
Yazeed Zaid

Reputation: 170

This is better and shorter:

input[type="text"], textarea {
              outline: none;
              box-shadow:none !important;
              border:1px solid #ccc !important;
                                                 }

Upvotes: 4

Luuk Skeur
Luuk Skeur

Reputation: 1940

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

Upvotes: 29

Mohammed Elbalkini
Mohammed Elbalkini

Reputation: 41

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;
}

Upvotes: -1

KJS
KJS

Reputation: 1214

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.

Upvotes: 0

r4k3sh
r4k3sh

Reputation: 131

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;
  }

Upvotes: 1

MD SHAYON
MD SHAYON

Reputation: 8055

If you are theming in scss

$input-btn-focus-box-shadow: none;

Upvotes: 0

John Dibling
John Dibling

Reputation: 101456

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>

Upvotes: 131

tao
tao

Reputation: 90068

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.

Upvotes: 50

Bhuwan
Bhuwan

Reputation: 16855

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;
}

Upvotes: 4

Merim
Merim

Reputation: 1363

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);

Upvotes: -1

Related Questions