Input:focus 없애기 - Input:focus eobs-aegi

웹페이지에서 인풋 태그(input)를 사용 하다보면 사용자가 현재 어떤 input 태그에 데이터를 입력 하고 있는지 표시해주기 위해서 활성화된 input 태그를 강조해주는 하이라이트가 생기게 됩니다. 크롬에서는 보통 하늘색 네모난 박스료 표시해주네요.

그런데 웹페이지를 디자인할 때 이 하이라이트가 강조되어 페이지의 디자인과는 잘 맞지 않는 경우가 있어, 이 하이라이트를 CSS 를 이용해 지워보도록 합시다.

outline을 none 으로 설정하기

CSS 를 이용하여 하이라이트를 제거하는 방법은 아주 간단합니다. 아래 예제를 보시죠.

input:focus { outline: none; }

아주 쉽죠? 포커스된 input 태그(input:focus)의 outline 을 none 으로 설정 해주는 것입니다. 위 코드는 모든 input 태그의 하이라이트가 제거되지만, id 혹은 class 를 사용하여 특정 input 태그만 선택하는 것 역시 가능 합니다.

#s-box:foucs { outline: none; }
.box:focus { outline: none; }

끝.

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using:

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

johannchopin

12.9k9 gold badges49 silver badges97 bronze badges

asked Aug 3, 2010 at 13:49

Joey MoraniJoey Morani

24.6k32 gold badges82 silver badges130 bronze badges

5

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

answered Aug 3, 2010 at 13:52

9

The current answer didn't work for me with Bootstrap 3.1.1. Here's what I had to override:

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

johannchopin

12.9k9 gold badges49 silver badges97 bronze badges

answered Feb 21, 2014 at 3:43

gwintrobgwintrob

3,0951 gold badge17 silver badges14 bronze badges

9

input:focus {
    outline:none;
}

This will do. Orange outline won't show up anymore.

johannchopin

12.9k9 gold badges49 silver badges97 bronze badges

answered Aug 3, 2010 at 13:52

azram19azram19

1,7271 gold badge9 silver badges6 bronze badges

4

<input style="border:none" >

Worked well for me. Wished to have it fixed in html itself ... :)

answered Oct 8, 2014 at 7:26

KailasKailas

7,1243 gold badges46 silver badges63 bronze badges

6

I've found the solution.
I used: outline:none; in the CSS and it seems to have worked. Thanks for the help anyway. :)

answered Aug 3, 2010 at 13:51

Joey MoraniJoey Morani

24.6k32 gold badges82 silver badges130 bronze badges

2

this remove orange frame in chrome from all and any element no matter what and where is it

*:focus {
    outline: none;
}

johannchopin

12.9k9 gold badges49 silver badges97 bronze badges

answered Oct 10, 2012 at 20:43

nonameherenonamehere

3453 silver badges2 bronze badges

Solution

*:focus {
    outline: 0;
}

PS: Use outline:0 instead of outline:none on focus. It's valid and better practice.

johannchopin

12.9k9 gold badges49 silver badges97 bronze badges

answered May 23, 2013 at 9:55

2

Please use the following syntax to remove the border of text box and remove the highlighted border of browser style.

input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}

daniel__

11.4k14 gold badges63 silver badges91 bronze badges

answered May 8, 2013 at 8:55

TabishTabish

1,48216 silver badges13 bronze badges

1

Set

input:focus{
    outline: 0 none;
}

"!important" is just in case. That's not necessary. [And now it's gone. –Ed.]

answered Sep 5, 2013 at 15:28

maddmadd

3292 silver badges8 bronze badges

2

This will definitely work. Orange outline will not show anymore.. Common for all tags:

*:focus {
    outline: none;
}

Specific to some tag, ex: input tag

input:focus {
   outline:none;
}

hichris123

10k15 gold badges55 silver badges69 bronze badges

answered Apr 19, 2013 at 6:51

I found out that you can also use:

input:focus{
   border: transparent;
}

bgilham

5,8691 gold badge23 silver badges39 bronze badges

answered May 6, 2015 at 12:51

RefilonRefilon

3,2211 gold badge27 silver badges49 bronze badges

1