[css] 부트 스트랩 3의 선택 태그에서 경계 반경 제거

Program / 글쓴이

이것은 사소한 문제처럼 보이지만 알아낼 수는 없습니다.

Bootstraps 자체 웹 사이트에는 Select 예제가 있습니다.

부트 스트랩 선택

코드를 보면 해당 선택 요소에 테두리 반경이 4 인 것처럼 보입니다.
여기에 이미지 설명을 입력하십시오

테두리 반경을 0으로 변경하면 선택 요소에서 테두리 반경이 제거되지만 아래 그림과 같이 그렇지 않습니다.

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

선택 요소를 변경하는 모든 CSS를 살펴 보았지만 테두리 반경을 제거하지 않는 것 같습니다.

답변

다음은 모든 최신 브라우저에서 작동하는 버전입니다. 키를 사용 appearance:none하여 기본 서식을 제거합니다. 모든 서식이 사라 졌으므로 선택 항목과 입력 내용을 시각적으로 구분하는 화살표를 다시 추가해야합니다. 참고 : appearanceIE에서는 지원되지 않습니다 .

실제 예 : https://jsfiddle.net/gs2q1c7p/

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}
<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

스 니펫 확장

를 기반으로 아르노 Tenkink의 코멘트에 제안, 여기를 사용하는 예입니다svg 대신에 png 화살표 아이콘.

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" version="1"><path d="M4 8L0 4h8z"/></svg>');
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}
<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

스 니펫 확장

답변

뿐만 아니라 border-radius: 0, 추가 -webkit-appearance: none;.

답변

나는 같은 문제가 있었고 user1732055의 대답으로 테두리를 수정하는 동안 드롭 다운 화살표를 제거합니다. select요소 에서 테두리를 제거하고 테두리가 있는 래퍼 span를 만들어서이 문제를 해결했습니다 .

html :

<span class="select-wrapper">
    <select class="form-control no-radius">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</span>

CSS :

select.no-radius{
    border:none;
}
.select-wrapper{
    border: 1px solid black;
    border-radius: 0px;
}

https://jsfiddle.net/Lrqh0drd/6/

답변

사용할 수 있습니다 -webkit-border-radius: 0;. 이처럼 :-

-webkit-border-radius: 0;
border: 0;
outline: 1px solid grey;
outline-offset: -1px;

드롭 다운 화살표와 함께 사각형 모서리가 나타납니다. -webkit-appearance: none;Chrome에서 수행 한 모든 스타일이 해제되므로 사용 하지 않는 것이 좋습니다.

답변

@ArnoTenkink의 SVG를 허용되는 답변과 결합 된 데이터 URL로 사용하면 망막 디스플레이를위한 완벽한 솔루션을 제공합니다.

select.form-control:not([multiple]) {
    border-radius: 0;
    appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%20%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%20%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2214px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2014%2012%22%20enable-background%3D%22new%200%200%2014%2012%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpolygon%20points%3D%223.862%2C7.931%200%2C4.069%207.725%2C4.069%20%22/%3E%3C/svg%3E);
    padding: .5em;
    padding-right: 1.5em
}

답변

클래스는 다음과 같습니다.

.form-control { border-radius: 0; }

부트 스트랩 css를 포함시킨 후에 재정의를 삽입하십시오.

선택 양식 컨트롤에서 반경을 제거하려는 경우에만 사용하십시오.

select.form-control { ... }

대신에

편집 : 크롬, 파이어 폭스, 오페라 및 사파리, IE9 +에서 작동합니다 (모두 Linux / Safari 및 IE에서 playonlinux에서 실행 중)

답변