부트 스트랩 입력 포커스를 파란색으로 변경

191

누구든지 부트 스트랩을 변경하는 방법을 알고 input:focus있습니까? input필드 를 클릭하면 파란색 빛이 나요?

html  css  twitter-bootstrap 
— felix001
소스
여러 곳에서 포커스 선택기를 볼 수 있듯이 변경해야하는지 확실하지 않습니까?
— felix001
1
: 분명히 @mdo 덜 변수로 글로우 컬러 지정하기 위해 우리를 허용하지 않도록 100 %입니다 github.com/twitter/bootstrap/issues/2742
— 벤 해롤드

답변:

223

결국 bootstrap.css에서 다음 CSS 항목을 변경했습니다.

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(126, 239, 104, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}
— felix001
소스
3
타겟팅input[type] {}
— Morpheus
2
더 이상 Bootstrap 3.x에서는 필요하지 않습니다. 자세한 내용은 내 답변을 참조하십시오.
— Nate T
@Cricket이 변수는 현재 Boostrap 사용자 정의 프로그램에서 사용할 수 없습니다 :(
— Caumons
2
@Caumons 지금입니다. @input-border-focus이 답변 대신 사용 하는 것이 좋습니다 .
— Nate T
4
당신은 잊었다select
— David Morrow
169

.form-control선택기를 사용하여 모든 입력을 일치 시킬 수 있습니다 . 예를 들어 빨간색으로 변경하려면

.form-control:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

사용자 정의 CSS 파일에 넣고 bootstrap.css 후에로드하십시오. 텍스트 영역, 선택 등을 포함한 모든 입력에 적용됩니다.

— 이거 스터
소스
이것은 OP가 원하는 것이 아닙니다. 그는 국경이 아니라 빛을 바꾸는 방법을 요구했다
— Kevin Martin Jose
8
@lonesword가 맞습니다. 실제로 테두리 색상과 그림자 색상을 모두 변경해야합니다. 답변을 업데이트했습니다
— igaster
2
이것은 @ felix001의 솔루션보다 훨씬 깨끗하며 작동합니다
— dspacejs
58

Bootstrap 3.x를 사용하는 경우 이제 새 @input-border-focus변수를 사용하여 색상을 변경할 수 있습니다 .

자세한 정보 및 경고 는 커밋 을 참조하십시오 .

에서 _variables.scss 갱신@input-border-focus .

이 글로우의 크기 / 다른 부분을 수정하려면 mixins / _forms.scss를 수정하십시오

@mixin form-control-focus($color: $input-border-focus) {
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
  &:focus {
    border-color: $color;
    outline: 0;
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px $color-rgba);
  }
}
— 네이트 T
소스
4
이 작업을 수행하거나 수행하는 방법에 대한 예가 있습니까? 미리 감사드립니다
— Seany84
2
부트 스트랩 스타일 시트 의 Less 또는 Sass 버전 을 사용해야합니다 . 그런 다음 부트 스트랩 스타일 시트를 가져 오기 전에 사용자 정의 변수를 설정하면 부트 스트랩 기본값이 무시됩니다. 스타일 시트를 미리 컴파일하거나 Sprockets 와 같은 것을 사용해야합니다 .
— Nate T
또한 적은 변수에 지정 변경을 공식 부트 스트랩 사이트의 사용을 만들 수 : getbootstrap.com/customize
— red_trumpet
1
좋지만 버튼과 다른 링크에는 적용되지 않으며 입력 및 텍스트 영역에만 적용됩니다. 예를 들어 버튼의 경우 여전히을 (를) 재정의해야합니다 .btn:focus { outline: none; }.
— zok
이 답변은 SASS / SCSS를 사용하는 사람들에게 효과적입니다. @ input-order-focus는입니다 _variables.scss.
— TyMayn
32

여기에 이미지 설명을 입력하십시오 여기에 이미지 설명을 입력하십시오

이 방법으로 부트 스트랩 스타일을 변경하지 않고 .form-control:focus 색상 을 수정할 수 있습니다 .

빠른 수정

.form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }

전체 설명

  1. 사용중인 bootstrapCDN 버전을 찾으십시오. 예를 들어 지금 당장은 4.3.1입니다 : https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
  2. 수정하려는 수업을 검색하십시오. 예를 들어 .form-control:focus수정하려는 매개 변수를 CSS에 복사하십시오. 이 경우에 border-color와 box-shadow.
  3. 에 대한 색상을 선택하십시오 border-color. 이 경우 .btn-success1 단계에서 언급 한 bootstrap.css 페이지에서 특정 클래스를 검색 하여 부트 스트랩이 클래스에 사용하는 것과 동일한 녹색을 선택합니다 .
  4. 선택한 색상을 RGB로 변환하고 box-shadow부트 스트랩이 투명성을 위해 갖는 네 번째 RGBA 매개 변수 (0.25)를 변경하지 않고 매개 변수에 추가하십시오 .
— dcx86
소스
1
위대하고 간단하며 작동하며 녹색도 필요합니다. :)
— alfian5229
13

Bootstrap v4.0.0 베타 릴리스의 경우 Bootstrap을 대체하는 스타일 시트에 다음을 추가해야합니다 (bootstrap v4.0.0 베타에 CDN / local 링크 후 추가하거나 !important스타일링에 추가) .

.form-control:focus {
  border-color: #6265e4 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}

상자 그림자의 테두리 색상과 rgba를 원하는 색상 스타일로 바꿉니다 *.

12

Bootstrap 4에서 직접 SASS를 컴파일하는 경우 다음 변수를 변경하여 초점 그림자의 스타일을 제어 할 수 있습니다.

$input-btn-focus-width:       .2rem !default;
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

참고 : Bootstrap 4.1부터 $input-btn-focus-color및 $input-btn-focus-box-shadow변수는 입력 요소에만 사용되며 버튼에는 사용되지 않습니다. 버튼의 포커스 그림자는로 하드 코딩 box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);되므로 $input-btn-focus-width변수 를 통해서만 그림자 너비를 제어 할 수 있습니다 .

— 세탁기
소스
11

Chrome에서 플랫폼 기본 '노란색'개요를 표시하도록 변경 한 사항은 다음과 같습니다.

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: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 5px;
}
— 피터
소스
1
크롬 노랑 윤곽선을 비활성화하려면 어떻게해야합니까?
— Roy Lee
실제로, 모든 : focus 아웃 라인을 비활성화하지 마십시오 (위에서 제안한 바와 같이). 키보드 전용 사용자에게는 접근성이 끔찍합니다. 당신은 상기와 플랫폼 기본값을 사용하지 않고 적절하게 접근 할 뭔가를 추가 할 수 있습니다 outline: dotted thin black;(또는 테스트는 작품 제안 무엇이든)
— peater
8

파란색 광선을 비활성화하려면 (색상, 크기 등을 변경하도록 코드를 수정할 수 있음) CSS에 추가하십시오.

.search-form input[type="search"] {  
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 0px;
}

다음은 효과를 보여주는 화면 캡처입니다. 여기에 이미지 설명을 입력하십시오 여기에 이미지 설명을 입력하십시오

— 라두
소스
이것은 나를 위해 일했습니다. 그러나 파란색으로 남겨두기 때문에 테두리 색상을 추가해야했습니다.
— Rachel S
6

나는 글로우를 완전히 비활성화하는 방법을 찾기 위해이 스레드에 착륙했습니다. 많은 답변이 제 목적으로 지나치게 복잡했습니다. 쉬운 해결책을 위해 다음과 같이 한 줄의 CSS가 필요했습니다.

input, textarea, button {outline: none; }
— Massanishi
소스
2
당신도 필요할 것 같아요 box-shadow: none;.
— silverliebt
2
그것은 나를 위해 일하지만 추가했다 !important애프터 box-shadow@silverliebt 제안
— Jefrey Sobreira 산토스
5

body 태그에 ID를 추가하십시오. 자신의 CSS (bootstrap.css 아님)에서 새 본문 ID를 가리키고 재정의하려는 클래스 또는 태그와 새 속성을 설정하십시오. 이제 변경 사항을 잃지 않고 언제든지 부트 스트랩을 업데이트 할 수 있습니다.

html 파일 : 

  <body id="bootstrap-overrides">

CSS 파일 : 

#bootstrap-overrides input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus{
  border-color: red;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

참조 : 재정의 부트 스트랩 CSS에 가장 좋은 방법은

— 프리랜서
소스
5

실제로 Bootstrap 4.0.0-Beta (2017 년 10 월 기준)에서 input 요소는 input [type = "text"]에 의해 참조되지 않으며 입력 요소에 대한 모든 Bootstrap 4 속성은 실제로 폼 기반입니다.

따라서 .form-control : focus 스타일을 사용하고 있습니다. 입력 요소의 "초점"강조를위한 적절한 코드는 다음과 같습니다.

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: none;
}

아주 쉽게 구현할 수 있으며 border-color 속성 만 변경하면 됩니다.

— 마음 팀
소스
또는 scss를 사용하는 경우 부트 스트랩 4.0.0-Beta
— Zuhaib Ali에
나는 당신도 이것에 추가해야한다고 생각합니다box-shadow: xpx ypx #80bdff;
1

Bootstrap 3.3.7에서는 커 스터 마이저의 Forms 섹션에서 @ input-border-focus 값을 변경할 수 있습니다. 여기에 이미지 설명을 입력하십시오

— 스티브
소스
1

에 구축 @의 wasinger의 답변 , 위의 것은에서 부트 스트랩 4.5 나는뿐만 아니라 컬러 변수를 무시했다뿐만 아니라 box-shadow그 자체.

$input-focus-width: .2rem !default;
$input-focus-color: rgba($YOUR_COLOR, .25) !default;
$input-focus-border-color: rgba($YOUR_COLOR, .5) !default;
$input-focus-box-shadow: 0 0 0 $input-focus-width $input-focus-color !default;
— 골븐
소스
0

CSS로는 이것을 해결할 수 없습니다. 부트 스트랩 후 site.css를 사용하더라도 Boostrap이 마지막으로 말하는 것처럼 보입니다. 어쨌든 이것은 나를 위해 일했습니다.

$(document).ready(function () {
    var elements = document.getElementsByClassName("form-control");

    Array.from(elements).forEach(function () {
        this.addEventListener("click", cbChange, false);
    })

    });

function cbChange(event) {
    var ele = event.target;
    var obj = document.getElementById(ele.id);
    obj.style.borderColor = "lightgrey";
}

나중에 이것은 CSS에서 작동하는 것으로 나타났습니다. 분명히 폼 컨트롤 만 사용

.form-control.focus, .form-control:focus {
    border-color: gainsboro;
}

다음은 Chrome 개발자 도구의 촬영 전후입니다. 포커스 온과 포커스 오프의 경계 색상 차이를 확인하십시오. 참고로 버튼에는 작동하지 않습니다. 버튼이 있습니다. 버튼을 사용하면 외곽선 속성을 none으로 변경해야합니다.

여기에 이미지 설명을 입력하십시오

여기에 이미지 설명을 입력하십시오

— 단
소스
0

포커스 전의 입력 테두리 사용하려는 선호하는 색상과 패딩 등의 다른 CSS를 지정할 수 있습니다.


.input {
    padding: 6px 190px 6px 15px;
    outline: #2a65ea auto 105px ;
}

입력에 집중할 때. 원하는 색상을 원하는대로 지정할 수 있습니다


.input:focus{
    box-shadow: none;
    border-color: none;
    outline: lightgreen auto 5px ;
}
— 사친
소스
0

그림자를 완전히 제거하려면 클래스 shadow-none를 입력 요소에 추가하십시오 .

— 월 아사 프
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.