[select] Chrome / Webkit의 <select> 요소에서 둥근 모서리 제거

Program / 글쓴이

Chrome 용 사용자 에이전트 스타일 시트는 <select>요소 의 모든 모서리에 5px의 경계 반경을 제공합니다 . 외부 스타일 시트를 통해 반경 0px를 적용하고 요소 자체에 인라인을 적용하여이를 제거하려고 시도했습니다. 난 둘 다 해봤 border-radius:0px와 -webkit-border-radius:0px;와 나는 더 구체적인 노력했습니다 border-top-left-radius:0px(그것의 -webkit 동등한와 함께)를.

아무것도 작동하지 않습니다.

웹킷의 개발자 도구에서 요소를 검사 할 때 컴퓨팅 스타일에는 여전히 반경이 5px로 표시됩니다. 그러나 옆에있는 확장 화살표를 클릭하면 자세한 내용을 볼 수 있습니다 : element.style-0px. 그리고 그 아래에는 5px의 사용자 에이전트 스타일 시트 사양과 함께 0px의 외부 CSS 사양이 나와 있습니다. 그리고 후자 둘 다 필요에 따라 제거됩니다.

어떤 아이디어?

답변

이것은 나를 위해 작동합니다 (드롭 다운 목록이 아닌 첫 번째 모양의 스타일).

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

http://jsfiddle.net/fMuPt/

답변

드롭 다운 이미지가있는 내 솔루션 (inline svg)

select.form-control {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

부트 스트랩을 사용하고 있기 때문에 select.form-control
사용 select{하거나 select.your-custom-class{대신 사용할 수 있습니다 .

답변

사각형 테두리를 원하고 작은 확장 화살표를 원한다면 다음을 권장합니다.

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}

답변

여기에 좋은 해결책이 있지만 SVG가 필요하지 않고 경계를 유지 outline하고 버튼에 플러시합니다.

select {
  height: 20px;
  -webkit-border-radius: 0;
  border: 0;
  outline: 1px solid #ccc;
  outline-offset: -1px;
}
<select>
 <option>Apple</option>
 <option>Ball</option>
 <option>Cat</option>
</select>

스 니펫 확장

답변

상단 답변은 테두리를 제거하지만 화살표도 제거하므로 사용자가 요소를 선택 항목으로 식별하는 것이 불가능하지는 않지만 매우 어려워집니다.

내 솔루션은 선택 뒤에 흰색 div (국경-반경 : 0px)를 붙이는 것입니다. 위치를 절대로, 높이를 선택의 높이로 설정하면 잘 갈 수 있습니다!

답변

맞춤 오른쪽 드롭 다운 화살표가있는 솔루션, CSS 만 사용 (이미지 없음)

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;

  -moz-appearance: none;
  display: block;
  padding: 0.3rem;
  height: 2rem;
  width: 100%;
}
<html>

<body>
  <br/>
  <h4>Example</h4>
  <select>
    <option></option>
    <option>Hello</option>
    <option>World</option>
  </select>
</body>

</html>

스 니펫 확장

답변

간단하게 유지하고 화살표와 같은 기능을 사용하지 않는 한 가지 방법은 select 태그와 동일한 배경색으로 div에 저장하는 것입니다.