How to remove the border highlight on an input text element

css input safari webkit border

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it.

For the layout I am working on, this is distracting and does not look right.

<input type="text" name="user" class="middle" id="user" tabindex="1" />

Firefox does not seem to do this, or at least, will let me control it with:

border: x;

If someone can tell me how IE performs, I would be curious.

Getting Safari to remove this little bit of flare would be nice.

Community

In your case, try:

input.middle:focus {
    outline-width: 0;
}

Or in general, to affect all basic form elements:

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

In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):

[contenteditable="true"]:focus {
    outline: none;
}

Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:

*:focus {
    outline: none;
}

Keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused.

Thanks Cory, great tip. You also need to assign the CSS to textarea to cover all input fields. input:focus, textarea:focus {outline: none;}

don't forget select as well select:focus {outline:none;}

There's also the <button> tag, which is used by jQuery UI and Twitter Bootstrap, amongst other things, so I'd add button: focus to the list for completeness.

Given the HTML 5 attribute contenteditable, it's worth noting that any editable element will have the outline when it has focus (in many browsers), so div:focus {outline:none}, p:focus {outline:none} or almost any element can also apply here.

@Cᴏʀʏ would you mind moving the note about a11y and usability to the very top of your question? IMO it would greatly improve your answer since removing a11y features is a bad practice.

animuson

To remove it from all inputs

input {
 outline:none;
}

Rikard Askelöf

This was confusing me for some time until I discovered the line was neither a border or an outline, it was a shadow. So to remove it I had to use this:

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

Boaz

This is an old thread, but for reference it's important to note that disabling an input element's outline is not recommended as it hinders accessibility.

The outline property is there for a reason - providing users with a clear indication of keyboard focus. For further reading and additional sources about this subject see http://outlinenone.com/

Boaz, FYI input.middle{outline: none} will still allow you to traverse through the elements(including input.middle). Pressing the tab key will focus on the input tag as well. Only thing is that you won't be able to see the focus(outline focus) on it. So it's not that harmful to use it.. : )

@AnishNair Only thing is that you won't be able to see the focus(outline focus) on it - and that's exactly my point. Removing the outline disables the visual indication of the focus event, not the actual event. Removing the visual indication means you're making it harder for people with disabilities who rely on that indication.

Sometimes we need to compromise, in order to achieve something : )

@AnishNair True. But more than often people reading this thread would prefer the easy way out (i.e. outline:none;) without considering the implications. Just because something is easy and saves time, doesn't mean it's best practice :)

I'm late to the discussion, but you can still style the focused state of the inputs (like changing the border colour or width). As long as you keep accessibility in mind when doing that (good contrast etc), it's just as accessible as the default outlines.

Ali Al Amine

The only solution that worked for me

The border is actually a shadow. So to hide it I had to do this:

input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }

Tom Esterez

Edit 2021: you can now use this: https://github.com/WICG/focus-visible

Removing all focus styles is bad for accessibility and keyboard users in general. But outlines are ugly and providing a custom focussed style for every single interactive element can be a real pain.

So the best compromise I've found is to show the outline styles only when we detect that the user is using the keyboard to navigate. Basically, if the user presses TAB, we show the outlines and if he uses the mouse, we hide them.

It does not stop you from writing custom focus styles for some elements but at least it provides a good default.

This is how I do it:

// detect keyboard users const keyboardUserCssClass = "keyboardUser"; function setIsKeyboardUser(isKeyboard) { const { body } = document; if (isKeyboard) { body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass); } else { body.classList.remove(keyboardUserCssClass); } } // This is a quick hack to activate focus styles only when the user is // navigating with TAB key. This is the best compromise we've found to // keep nice design without sacrifying accessibility. document.addEventListener("keydown", e => { if (e.key === "Tab") { setIsKeyboardUser(true); } }); document.addEventListener("click", e => { // Pressing ENTER on buttons triggers a click event with coordinates to 0 setIsKeyboardUser(!e.screenX && !e.screenY); }); document.addEventListener("mousedown", e => { setIsKeyboardUser(false); }); body:not(.keyboardUser) *:focus { outline: none; }

By default, you'll see no outline. But press TAB key and you'll see focussed element

This is anchor link

Rizwan

You can remove the orange or blue border (outline) around text/input boxes by using: outline:none

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    outline:none !important;
}

Yosep Tito

try this css, it work for me

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

While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation.

Luke

Remove the outline when focus is on element, using below CSS property:

input:focus {
    outline: 0;
}

This CSS property removes the outline for all input fields on focus or use pseudo class to remove outline of element using below CSS property.

.className input:focus {
    outline: 0;
}

This property removes the outline for selected element.

corn on the cob

Try this:

*:focus {
    outline: none;
}

This would affect all your pages.

kkpareek

In case the above solutions din't work, you might be using the bootstrap and therefore the .form-control class is applying box-shadow css property to your input field by default.

The solution will be:

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

How to remove the border highlight on an input text element

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US