Remove Default Focus Outline and Change to Different Color

Remove default focus outline and change to different color

It's a box-shadow style applied on focus.

add this code to remove it:

.form-control:focus {
   box-shadow:none;
}

You may add !important depending on your CSS order:

How to reset / remove chrome's input highlighting / focus border?

You should be able to remove it using

outline: none;

but keep in mind this is potentially bad for usability: It will be hard to tell whether an element is focused, which can suck when you walk through all a form's elements using the Tab key - you should reflect somehow when an element is focused.

How to remove focus border (outline) around text/input boxes? (Chrome)

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:

textarea:focus, input:focus{
    outline: none;
}

You may want to add some other way for users to know what element has keyboard focus though for usability.

Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:

*:focus {
    outline: none;
}

---

⚠️ Accessibility warning

Please notice that removing outline from input is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. More info at a11yproject

Remove input blue outline color

According to MDN

The outline CSS property is a shorthand to set various outline properties in a single declaration: outline-style, outline-width, and outline-color.

So when we set outline to none or 0, we are actually setting 3 properties

• outline-style
• outline-width
• outline-color

This is obtain from chrome developer options:

outline:none; will set:

outline-color: initial;
outline-style: none;
outline-width: initial;

outline:0; will set:

outline-color: initial;
outline-style: initial;
outline-width: 0px;

In your case setting outline:none should do a trick.

Hope this helps. Happy Coding!!!

Chrome default focus outline

Try this:

* { 
    outline-color: lime;
}

remove current color on focus of input and put another color on focus of whole box

This will work for you.

Please not that this is only a workaround, as far as I know you can't do that with pure CSS.

I've used the position property and added the span element inside both .login-input-item div's because the input element doesn't support the :before or :after selectors.

A working sample created with your own fiddle:

input{

  outline: none;

}

.login-input-container {

  margin: 20px;

  padding: 0;

  position: relative;

  border: none;

}

.login-user-input {

  display: block;

  color: #282c3f;

  padding-right: 40px;

  font-size: 15px;

  width: 100%;

  border: 0;

  padding: 15px;

}

button,

input,

select {

  overflow: visible;

}

input {

  -webkit-appearance: textfield;

  background-color: white;

  -webkit-rtl-ordering: logical;

  cursor: auto;

  padding: 1px;

  border-width: 2px;

  border-style: inset;

  border-color: initial;

  border-image: initial;

}

fieldset {

  display: block;

  -webkit-margin-start: 2px;

  -webkit-margin-end: 2px;

  -webkit-padding-before: 0.35em;

  -webkit-padding-start: 0.75em;

  -webkit-padding-end: 0.75em;

  -webkit-padding-after: 0.625em;

  min-width: -webkit-min-content;

  border-width: 2px;

  border-style: groove;

  border-color: threedface;

  border-image: initial;

}

.login-login-button-container {

  padding: 10px 20px;

  margin: 0;

  border: 0;

}

.login-login-button {

  background-color: #ff527b;

  color: #fff;

  font-size: 13px;

  font-weight: 500;

  letter-spacing: 2px;

  padding: 15px;

  display: block;

  width: 100%;

  border: 0;

  text-transform: uppercase;

  border-radius: 3px;

  font-family: Whitney;

}

.login-facebook {

  margin-right: 15px;

  margin-bottom: 0;

  width: 160px;

  height: 50px;

  border: 1px solid #bfc0c6;

  background-color: #fff;

  border-radius: 6px;

}

.login-gplus-logo {

  background-position: -298px 0!important;

  width: 23px;

  top: 13px;

}

.login-user-input-email {

  border-top-left-radius: 5px;

  border-top-right-radius: 5px;

}

input+span {

  content:'';

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  border: 1px solid #bfc0c6;

  border-radius: 5px;

  pointer-events:none;

}

input:focus+span {

  border: 1px solid #FF527A;

  z-index: 10;

}

<form class="login-login-form" novalidate="">

  <fieldset class="login-input-container">

    <div class="login-input-item">

      <!-- begin snippet: js hide: false console: true babel: false -->

      <input type="email" class="login-user-input-email login-user-input" name="email" placeholder="Your Email Address">

      <span></span>

    </div>

    <div class="login-input-item">

      <input type="password" class="login-user-input-password login-user-input" name="password" placeholder="Enter Password">

      <span></span>

    </div>

    <input type="hidden" name="xsrf" value="p62ZV7Us9ZNGgTzAWkolbiVogIJGNu5r">

  </fieldset>

  <fieldset class="login-login-button-container">

    <button class="login-login-button">Log in</button>

  </fieldset>

</form>

Remove blue border from css custom-styled button in Chrome

Doing this is not recommended as it regresses the accessibility of your site; for more info, see this post.

That said, if you insist, this CSS should work:

button:focus {outline:0;}

Check it out or JSFiddle: http://jsfiddle.net/u4pXu/

Or in this snippet:

button.launch {

background-color: #F9A300;

border: none;

height: 40px;

padding: 5px 15px;

color: #ffffff;

font-size: 16px;

font-weight: 300;

margin-top: 10px;

margin-right: 10px;

}

button.launch:hover {

cursor: pointer;

background-color: #FABD44;

}

button.launch {

background-color: #F9A300;

border: none;

height: 40px;

padding: 5px 15px;

color: #ffffff;

font-size: 16px;

font-weight: 300;

margin-top: 10px;

margin-right: 10px;

}

button.launch:hover {

cursor: pointer;

background-color: #FABD44;

}

button.change {

background-color: #F88F00;

border: none;

height: 40px;

padding: 5px 15px;

color: #ffffff;

font-size: 16px;

font-weight: 300;

margin-top: 10px;

margin-right: 10px;

}

button.change:hover {

cursor: pointer;

background-color: #F89900;

}

button:active {

outline: none;

border: none;

}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 

<button class="change">Change</button>

remove bootstrap select focus outline in chrome

Pretty sure (without a picture) that you'll need box-shadow: none!important; as well

focus:outline-none not working Tailwind CSS with Laravel

Having same issue right now, Laravel 8, Inertia, Breeze & Tailwind: when I set outline-none on a element, it is ignored. Everything else seems to work properly.

The only thing which solved it was to add css: border-transparent focus:border-transparent focus:ring-0 on the element itself.

---

Related Topics