Twitter 부트스트랩 텍스트 상자 글로우 및 섀도 재정의

Twitter 부트스트랩 텍스트 상자 글로우 및 섀도 재정의

텍스트 상자와 테두리의 블루 글로우를 제거하고 싶은데 js나 CSS를 재정의하는 방법을 모르겠습니다. 여기를 확인하십시오.

편집 1

jquery plugin Tag-it을 사용하고 있고 twitter bootstrap을 사용하고 있기 때문에 이렇게 하고 싶습니다. 플러그인은 숨겨진 textField를 사용하여 태그를 추가하지만 twitter bootstrap을 사용하면 텍스트 상자 안에 글로우가 있는 텍스트 상자로 표시되는데 약간 이상합니다.

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

CSS 클래스를 처리할 수 없다고 생각되면 텍스트 필드에 스타일을 추가하기만 하면 됩니다.

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

부트스트랩 사용자 지정으로 이동하여 @input-border-focus를 찾고 원하는 색상 코드를 입력한 후 아래로 스크롤하여 "Compile and Download"를 클릭합니다.

이렇게 하면 테두리와 포커스 블루 음영이 제거됩니다.

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);
}

지금까지 어떤 대답도 이 실마리에서 도움이 되지 않았습니다.해결해 준 것은

/*Shadow after focus - Overwrites bootstrap5 style for btn classes*/
.btn-check:focus + .btn-primary, 
.btn-primary:focus {
    box-shadow: 0 0 7px 7px rgba(4,220,93,255);
}
/*Shadow while clicking (Animation) - Overwrites bootstrap5 style for btn classes*/
.btn-check:active + .btn-primary:focus, 
.btn-check:checked + .btn-primary:focus, 
.btn-primary.active:focus, 
.btn-primary:active:focus, 
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(10, 102, 37, 0.493);
}

언급URL : https://stackoverflow.com/questions/12200544/override-twitter-bootstrap-textbox-glow-and-shadows