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

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에 저장하는 것입니다.

화살표를 제거하지 마십시오. 드롭 다운 화살표를 유지하는 솔루션은 먼저 드롭 다운에서 스타일을 제거하는 것입니다.

.myDropdown {
  background-color: #yourbg;
  border-style: none;
}

그런 다음 HTML 드롭 다운 바로 앞에 div를 만듭니다.

<div class="myDiv"></div>
<select class="myDropdown...">...</select>

그리고 다음과 같이 div 스타일을 지정하십시오.

.myDiv {
  background-color: #yourbg;
  border-style: none;
  position: absolute;
  display: inline;
  border: 1px solid #acolor;
}

인라인 표시는 div가 새 줄로 이동하지 못하게하고 절대 위치는 페이지 흐름에서 div를 제거합니다. 최종 결과는 원하는대로 스타일을 지정할 수있는 깔끔한 밑줄이며, 드롭 다운은 사용자가 원하는대로 동작합니다.

삽입 상자 그림자는 트릭을 수행합니다.

select{
  -webkit-appearance: none;
  box-shadow: inset 0px 0px 0px 4px;
  border-radius: 0px;
  border: none;
  padding:20px 150px 20px 10px;
}

데모

어떤 이유로 국경의 색상에 실제로 영향을 받습니까? 표준 색상을 사용하면 모서리가 둥글게 유지되지만 색상을 약간 변경해도 반올림이 사라집니다.

select.regularcolor {
    border-color: rgb(169, 169, 169);
}

select.offcolor {
    border-color: rgb(170, 170, 170);
}

https://jsfiddle.net/hLg70o70/2/

잘 나는 해결책을 얻었다. 그것이 당신을 도울 수 있기를 바랍니다 :)

select{
      border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch;
      width: 120px;
      height: 36px;
      color: #999;
  }

<select>
  <option value="1">Hi</option>
  <option value="2">Bye</option>
</select>

다음과 같은 방법이 있습니다.

1. 드롭 다운처럼 보이는 배경 이미지를 만듭니다.
2. 브라우저 모양 끄기
3. 선택한 구성 요소의 배경 이미지 정렬

  .control select {  
    border-radius: 0px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("<your image>");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 20px;
  }

jordan314의 솔루션을 사용했지만 "border-light"클래스를 추가했습니다. CSS에 기본 보더 라이트 클래스가 정의되어 있으면 직접 사용할 수 있습니다. 테두리를 흰색으로 정의합니다). 테두리를 사각형으로 변경하고 반경을 제거하고 화살표를 유지했습니다.

여기 내가 한 일이 있습니다.

<select class="form-control border border-light" id="type">
   <option>Select</option>
   <option value="mobile">Apple</option>
 </select>

사전 정의 된 보더 라이트가없는 경우 CSS를 추가하십시오.

<style>
.border-light{
         border-color:#f8f9fa!important
     }

 #type {
   border:0;
   outline:1px solid #ddd;
   background-color:white;
 }
</style>

파이어 폭스 : 18

.squaredcorners {
    -moz-appearance: none;
}

CSS를 다음과 같이 설정하십시오.

border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important

작동하는지보십시오.