트위터 부트 스트랩 텍스트 상자 광선 및 그림자 재정의

텍스트 상자와 테두리의 파란색 광선을 제거하고 싶지만 js 또는 CSS를 재정의하는 방법을 모르겠습니다. 여기를 확인하십시오.

편집 1

나는 jquery 플러그인 Tag-it을 사용 하고 있고 트위터 부트 스트랩도 사용하고 있기 때문에 이것을하고 싶습니다 . 플러그인은 숨겨진 textField를 사용하여 태그를 추가하지만 트위터 부트 스트랩을 사용하면 내부에 글로우가있는 텍스트 상자로 나타납니다. 약간 이상한 텍스트 상자

.simplebox {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

기본 부트 스트랩 설정을 재정 의하여 고유 한 색상을 사용할 수도 있습니다.

textarea:focus,
input[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 {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

input.simplebox:focus {
  border: solid 1px #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: none;
  -moz-transition: none;
  -webkit-transition: none;
}

초점이 맞지 않는 스타일을 부트 스트랩하도록 설정

파헤친 후 최신 부트 스트랩에서 변경 한 것 같습니다. 아래 코드는 저에게 효과적이었습니다. 단순한 상자가 아니라 제가 사용했던 폼 컨트롤이 문제를 일으켰습니다.

input.form-control,input.form-control:focus {
    border:none;
    box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   -moz-transition: none;
   -webkit-transition: none;
}

Customize Bootstrap으로 이동하여 @ input-border-focus를 찾은 다음 원하는 색상 코드를 입력하고 아래로 스크롤하여 "컴파일 및 다운로드"를 클릭합니다.

CSS 클래스를 처리 할 수 ​​없다고 생각되면 텍스트 필드에 스타일을 추가하십시오.

<input type="text" style="outline:none; box-shadow:none;">

그러면 테두리와 초점 파란색 그림자가 제거됩니다.

input.simplebox,input.simplebox:focus {
  border:none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -moz-transition: none;
  -webkit-transition: none;
}

http://jsfiddle.net/pE5mQ/64/

부트 스트랩 3에는 ios에 작은 상단 쇼 도우가 있으며 다음과 같이 제거 할 수 있습니다.

input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
    -webkit-appearance: caret;
    -moz-appearance: caret; /* mobile firefox too! */
}

여기 에서 얻었습니다 .

레거시 브라우저를 지원하지 않는 한 현재 공급 업체 접두사는 필요하지 않으며 각 개별 유형이 아닌 모든 입력을 참조하여 선택기를 단순화 할 수 있습니다.

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  box-shadow: none;
}

HTML

<input type="text" class="form-control shadow-none">

CSS

input:focus{
    border: 1px solid #ccc
}

.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(103, 250, 34, 0.25);
}