부트스트랩 입력 포커스 파란색 표시 변경
부트스트랩을 변경하는 방법을 아는 사람?input:focus▁▁an빛을 클릭하면 나타나는 빛input 야전?
결국 나는 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;
}
당신은 할 수 ..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 뒤에 로드합니다.텍스트 영역, 선택 영역 등을 포함한 모든 입력에 적용됩니다.
다음을 수정할 수 있습니다..form-control:focus 다음과 같은 방식으로 부트스트랩 스타일을 변경하지 않고 색상을 지정할 수 있습니다.
빠른 수정
.form-control:focus {
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
완전한 설명
- 부트스트랩 찾기사용 중인 CDN 버전입니다.예를 들어, 현재 저는 4.3.1입니다.
- 수정할 클래스를 검색합니다.예를 들어 수정할 매개 변수를 CSS에 복사합니다. 이 경우 및 입니다.
- 용할색상선니다합택을사▁다▁a에 사용할 을 선택합니다.
border-color이 경우 1단계에서 언급한 bootstrap.css 페이지에서 특정 클래스를 검색하여 부트스트랩이 클래스에 사용하는 것과 동일한 녹색을 선택합니다. - 하여 에한색로 RGB변 RGB니에 합니다.
box-shadow투명성을 위해 부트스트랩에 있는 네 번째 RGBA 매개 변수(0.25)를 변경하지 않는 매개 변수.
3 새로운 "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);
}
}
의 경우 부트스트랩을0에 CDN합니다).!important스타일링에:
.form-control:focus {
border-color: #6265e4 !important;
box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}
상자 그림자의 테두리 색상과 rgba를 원하는 색상으로 대체합니다*.
부트스트랩 4에서 직접 SAS를 컴파일하면 다음 변수를 변경하여 포커스 섀도우의 스타일링을 제어할 수 있습니다.
$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;
, 다음은 4.1입니다.$input-btn-focus-color그리고.$input-btn-focus-box-shadow변수는 입력 요소에만 사용되고 단추에는 사용되지 않습니다.는 단의포커섀도다음같과이하코드다딩니됩는추스coded▁for▁is▁as다▁the▁hard니로 하드 코딩됩니다.box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);따라서 그림자 폭은 다음을 통해서만 제어할 수 있습니다.$input-btn-focus-width변수.
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;
}
파란색 글로우를 비활성화하려면(단, 코드를 수정하여 색상, 크기 등을 변경할 수 있음), 다음을 CSS에 추가합니다.
.search-form input[type="search"] {
-webkit-box-shadow: none;
outline: -webkit-focus-ring-color auto 0px;
}
다음은 효과를 보여주는 화면 캡처입니다. 전후:
간단한 하나
제거 방법:
.form-control, .btn {
box-shadow: none !important;
outline: none !important;
}
변경하기
.form-control, .btn {
box-shadow: new-value !important;
outline: new-value !important;
}
본문 태그에 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를 재정의하는 가장 좋은 방법
저는 이 스레드에 착륙하여 빛을 완전히 비활성화하는 방법을 찾았습니다.많은 답변들이 제 목적에 비해 너무 복잡했습니다.쉬운 해결을 위해 아래와 같이 한 줄의 CSS가 필요했습니다.
input, textarea, button {outline: none; }
실제로 Bootstrap 4.0.0-Beta(2017년 10월 기준)에서는 입력 요소가 입력[type="text"]에 의해 참조되지 않습니다. 입력 요소에 대한 모든 Bootstrap 4 속성은 실제로 양식 기반입니다.
즉, .form-control:focus 스타일을 사용합니다.입력 요소의 "온 포커스" 강조 표시에 적합한 코드는 다음과 같습니다.
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: none;
}
구현이 매우 쉬우며 테두리 색 속성만 변경하면 됩니다.
섀도를 완전히 제거하려면 클래스를 추가합니다.shadow-none입력 요소로 이동합니다.
위의 @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;
부트스트랩 3.3.7에서는 커스터마이저의 양식 섹션에서 @input-border-focus 값을 변경할 수 있습니다.
포커스 앞의 입력 테두리입니다.당신은 당신이 사용하고 싶은 좋아하는 색과 패딩과 같은 다른 CSS를 지정할 수 있습니다.
.input {
padding: 6px 190px 6px 15px;
outline: #2a65ea auto 105px ;
}
우리가 입력에 집중할 때.원하는 색상 윤곽선을 지정할 수 있습니다.
.input:focus{
box-shadow: none;
border-color: none;
outline: lightgreen auto 5px ;
}
이 방법은 100% 사용할 수 있습니다.
.form-control, .form-control:focus{
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
border: rgba(255, 255, 255, 0);
}
왜 그냥 사용하지 않습니까?
input:focus{
outline-color : #7a0ac5;
}
저는 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 Developer 도구의 전후 사진입니다.포커스 포커스와 포커스 오프 간의 테두리 색상 차이에 주목합니다.참고로 단추에는 사용할 수 없습니다.단추로.버튼을 사용하면 아웃라인 속성을 없음으로 변경해야 합니다.
이것은 그것을 제거하는 데 도움이 될 것입니다!
input[type = text] {
border: none;
}
input[type = text]:focus {
border: none;
box-shadow: none;
}이거 해봐요, 부트스트랩의 입력값과 같아요...
input:focus{
color: #212529;
background-color: #FFF;
border-color: #86B7FE;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
개요: 0; 상자 채우기: 없음; css
언급URL : https://stackoverflow.com/questions/14820952/change-bootstrap-input-focus-blue-glow
'programing' 카테고리의 다른 글
| 모두 비활성화하는 방법모두 비활성화하는 방법jQuery와 함께 폼 안에?jQuery와 함께 폼 안에? (0) | 2023.08.17 |
|---|---|
| cURL에서 HTTP 헤더가 있는 API 키 전달 (0) | 2023.08.17 |
| Angular 'ngOnInit'의 비동기/대기 (0) | 2023.08.12 |
| 모든 하위 요소 가져오기 (0) | 2023.08.12 |
| "git checkout"과 "git checkout"의 차이 -- (0) | 2023.08.12 |