Css убрать обводку input при фокусе

How to remove the border highlight on an input text element

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.

If someone can tell me how IE performs, I would be curious. Getting Safari to remove this little bit of flare would be nice.

21 Answers 21

Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.

Or in general, to affect all basic form elements:

input:focus, select:focus, textarea:focus, button:focus

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

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

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

There’s also the 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 , p:focus 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.

To remove it from all inputs

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

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 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.

@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.

This is a common concern.

The default outline that browsers render is ugly.

 
Click to see the input below to see the outline 

The most common «fix» that most recommend is outline:none — which if used incorrectly — is disaster for accessibility.

So. of what use is the outline anyway?

There’s a very dry-cut website I found which explains everything well.

It provides visual feedback for links that have «focus» when navigating a web document using the TAB key (or equivalent). This is especially useful for folks who can’t use a mouse or have a visual impairment. If you remove the outline you are making your site inaccessible for these people.

Ok, let’s try it out same example as above, now use the TAB key to navigate.

 
Click on this text and then use the TAB key to naviagte inside the snippet. 

Notice how you can tell where the focus is even without clicking the input?

Now, let’s try outline:none on our trusty

So, once again, use the TAB key to navigate after clicking the text and see what happens.

 
Click on this text and then use the TAB key to naviagte inside the snippet. 

See how it’s more difficult to figure out where the focus is? The only telling sign is the cursor blinking. My example above is overly simplistic. In real-world situations, you wouldn’t have only one element on the page. Something more along the lines of this.

.wrapper < width: 500px; max-width: 100%; margin: 0 auto; >form, label < margin: 1em auto; >label < display: block; >input

 
 
Click on this text and then use the TAB key to naviagte inside the snippet.      
 
First name: 
 
Last name: 
  Male 
 Female 
 Other
 
Name: Name:  
Title
 Click me 
 
 

Now compare that to the same template if we keep the outline:

 
 
Click on this text and then use the TAB key to naviagte inside the snippet.      
 
First name: 
 
Last name: 
  Male 
 Female 
 Other
 
Name: Name:  
Title
 Click me 
 
 

So we have established the following

So what’s the answer?

Remove the ugly outline and add your own visual cues to indicate focus.

Here’s a very simple example of what I mean.

I remove the outline and add a bottom border on :focus and :active. I also remove the default borders on the top, left and right sides by setting them to transparent on :focus and :active (personal preference)

form, label < margin: 1em auto; >label < display: block; >input < outline: none >input:focus, input:active

 
Click to see the input below to see the outline 

So, we try the approach above with our «real-world» example from earlier:

.wrapper < width: 500px; max-width: 100%; margin: 0 auto; >form, label < margin: 1em auto; >label < display: block; >input < outline: none >input:focus, input:active

 
 
Click on this text and then use the TAB key to naviagte inside the snippet.      
 
First name: 
 
Last name: 
  Male 
 Female 
 Other
 
Name: Name:  
Title
 Click me 
 
 

This can be extended further by using external libraries that build on the idea of modifying the «outline» as opposed to removing it entirely like Materialize

You can end up with something that is not ugly and works with very little effort

body < background: #444 >.wrapper < padding: 2em; width: 400px; max-width: 100%; text-align: center; margin: 2em auto; border: 1px solid #555 >button, .wrapper < border-radius: 3px; >button < padding: .25em 1em; >input, label

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

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.

// 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

Источник

Как убрать обводку при клике на input

Этот же приём убирает обводку пунктиром вокруг нажатой ссылки и вокруг любого из элементов формы.

Универсальное решение, которое убирает подсветку во всех браузерах и не только на input , но и на других элементах, в том числе select , button , a :

/* Remove outline on the forms and links */ :active, :hover, :focus

Попробуйте поставить box-shadow: none; У меня была такая проблема. Я просто сделал так при использовании Bootstrap

У меня была такая проблема. Я просто сделал так:

Примените свойство outline:none

Для получения симпатичного белого поля для ввода используйте свойства border и outline . Дополнительно рекомендую border-radius

Конкретно для input и конкретно при фокусе на нем:

Если используете Bootstrap, то, возможно, используется box-shadow .

Попробуйте поставить box-shadow: none;

Допишите также onFocus=»this.blur()»

А отдельным javascript’ом нельзя? Можно подключить скрипт и навесить события на нужные input’ы. А под каким браузером мешает обводка?

Да скрипт помог справиться с файрфоксом и ие8, только теперь в ие6-7 обводка появляется вокруг тега label, а как ее убрать

Все, что могу предложить — перебрасывать фокус на какой-нибудь другой элемент. Примерно так (используя jQuery): $(‘checkbox, label’).focusin(function());

Физически обводку убрать никак нельзя, браузер сам ее рисует. Фактически ее можно свернуть в точку, если у элемента A будет стиль не display:block , а display:inline . При этом на активную область это не повлияет, но это плохой вариант.

Лучше всего сделать элемент A поверх всей надписи, тогда заслонять надпись ничего не будет и выглядеть будет отлично.

Источник