Twitter 부트 스트랩에서 파란색 텍스트 영역 테두리를 제거 할 수없는 이유는 무엇입니까?

Twitter 부트 스트랩에서 파란색 텍스트 영역 테두리를 제거 할 수없는 이유는 무엇입니까?

---

Chrome에서는 텍스트 영역 주위에 파란색 테두리가 있습니다.

제거 할 수없는 이유는 무엇입니까?

textarea:hover, input:hover, textarea:active, input:active, textarea:focus, input:focus {
        outline:0px !important;
    }

---

다음 -webkit-appearance:none;과 같이 작성 했습니다.

textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline:0px !important;
    -webkit-appearance:none;
    box-shadow: none !important;
}

---

부트 스트랩 3

색상 만 변경하려면 변수 ( 권장 )를 변경하십시오 .

Less 또는 Customizer

@input-border-focus: red;

variables.less

Sass

$input-border-focus: red;

variables.sass

완전히 제거하지 않으 려면 윤곽선을 설정하는 Mixin 을 덮어 써야 합니다.

.form-control-focus(@color: @input-border-focus) {}

CSS

CSS를 사용하는 경우 다음을 통해 덮어 씁니다.

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

구현 링크

---

나는 그것이 그림자라고 믿습니다. 이 시도:

.box-shadow(none);

또는 LESS를 사용하지 않는 경우 :

box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;

---

이것을 시도하면 도움이 될 것이며 파란색 테두리가 제거 될 것이라고 생각합니다.

outline:none;

---

이것은 나를 위해 일했습니다.

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

---

이것은 100 % 작동합니다.

textarea:focus, input[type="text"]:focus,textarea[type="text"]:focus,   input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus,  input[type="color"]:focus, .uneditable-input:focus, .form-control:focus {  
border-color: (your color) or none;
box-shadow:(your color) or none;
outline: (your color) or none;}

---

이 변경 테두리 색상을 원하는대로 시도하십시오.

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

---

당신이 여전히이 문제에 직면 해있는 누군가라면.

여기에 답이 있습니다. 감사합니다.

.radio-custom input[type=radio]:focus+label::before {
    background-image: none !important;
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

다른 솔루션이 왜 당신을 위해 작동하지 않는지 궁금합니다 .

스타일이 실제로 라디오 버튼에 적용되지 않았기 때문입니다.

이 스타일을 추가하면 답을 찾을 수 있습니다.

input[type="text"] {
    margin-left: 10px;
}

label :: 그 전에 스타일을 적용해야합니다.

---

부츠 스트랩 4

바주카포로 파리를 죽이지 않으려면 -webkit-appearance : none; 이것은 또한 좋은 sliderinputs btw를 죽이고 당신이 당신의 입력을 위해 부트 스트랩 양식 css 선택기 "form-control"로 작업하고 있다고 가정합니다.

이것이 해결책입니다.

.form-control:focus {
    box-shadow: none!important;
    border-color: #ced4da!important;
}

작은 파란색 윤곽선을 유지하려면 테두리 색상을 그대로 두십시오.

---

This is what worked for me.. All the other solutions didn't quite work for me, but I understood one thing from the other solutions and its that default styles of textarea and label in combination is responsible for the blue border.

textarea, label
{
    outline:0px !important;

    -webkit-box-shadow: none !important;
}

EDIT: I had this issue with Ant Design textarea. Thats why this solution worked for me. So, if you are using Ant, then use this.

---

For future reference you can work out computed styles via an inspector

---

Use outline: transparent; in order to make the outline appear like it isn't there but still provide accessibility to your forms. outline: none; will negatively impact accessibility.

Source: http://outlinenone.com/

---

Your best bet is to right click > inspect the element.

I am using Bootstrap 4 and none of the suggestions worked until I did this.

Once I found where the relevant code was in the inspect window, I copied and pasted the relevant code that was causing the :focus to be outlined blue and changed it accordingly.

This is the code that worked in my css

.btn.focus, .btn:focus
{
outline: 0;
box-shadow: 0 0 0 0;
}

---

Bootstrap 4.0

*:focus
{
    box-shadow: none !important;
    border: solid 1px red( any color ) !important;
}

visual example

---

This worked for me

input[type=text]:focus{outline: none;}

i'm using bootstrap 3

---

Solved using this. Works fine on bootstrap 3.x and 4.0

* {
    outline:0px !important;
    -webkit-appearance:none;
}

With this code, you're going to remove outline from all tags and classes.

---

textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus
{
    outline: 0px !important;
    border: none!important;
}

*use border:none; instead of outline because the focus line is a border not a outline.

ReferenceURL : https://stackoverflow.com/questions/8622686/how-come-i-cant-remove-the-blue-textarea-border-in-twitter-bootstrap