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

143

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  css 
— 맥스 디슨
소스
코드를 게시 할 수 있습니까? jsfiddle.net을 사용하여 게시하면 더 좋습니다.
— ngen
1
Win7의 Chrome 10에서 기본 스타일로 테두리 반경이 실제로 없습니다. 아마도 다른 버전입니까? OS입니까?
— 웨슬리 머치
Windows 7의 Chrome 12에도 둥근 모서리가 없습니다.
— andyb
1
맥 오에스텐에 있다고 언급 했어야한다.
— maxedison

답변:

244

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

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

http://jsfiddle.net/fMuPt/

— 안토니
소스
179
둥근 모서리를 제거하지만 화살표를 오른쪽에 유지하는 방법은 무엇입니까?
— Adam
3
예를 들어 위치가 100 % 50 %이고 반복이없는 속성을 가진 배경 이미지와 같은 화살표를 추가해야합니다. 또한 추가 http 요청을 피하기 위해 CSS에서 base64로 인코딩 된 이미지를 사용했습니다.
— Karl Adler
26
@Adam 당신이 다음 border: 0과 같은 개요 를 사용 하고 추가 하면 그것은 나를 위해 일했다 :outline: 1px inset black; outline-offset:-1px
— Filipe Pereira
1
@FilipePereira Nice IE가 지원하지 않는 개요 오프셋을 추가해야하지만 좋아합니다.
— Tim
6
이렇게하면 오른쪽의 화살표가 제거되어 사용자 경험을 용인 할 수없는 수준으로 손상시킵니다. 대신, 스타일 드롭 다운 background-color: #yourbg및 border-style: none다음 직접와 드롭하기 전에 사업부를 작성 position: absolute하고 border-bottom: 1px solid #youpick와 display: inline. 화살표는 보존되었고 UX는 무사하고 개선되었습니다.
— devigner
90

드롭 다운 이미지가있는 내 솔루션 (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{대신 사용할 수 있습니다 .

— 아프 잘 호사 인
소스
4
svg의 채우기 색상이 입력에 설정 한 배경색을 덮어 쓰므로 배경 대 배경 이미지를 사용하는 것이 중요하지만 이것은 내 문제를 해결 한 유일한 대답입니다.
— Lucas M
동의,이 답변을 투표하십시오! 불완전한 답변에 대한 다른 투표를 이해하지 못합니다. 인라인 svg 대신 fontawesome 아이콘을 사용하는 조언이 있습니까?
— 니콜라스 테리
FontAwesome은 아이콘 모음이지만 하나의 아이콘 만 필요합니다. 따라서 icomoon.io와 같은 도구를 사용하여 FA 아이콘 중 하나를 추출해야합니다. 그런 다음 해당 아이콘을 svg 또는 png 파일로 내 보낸 다음 CSS에서 링크하십시오
— Afzal Hossain
좋은 해결책이지만 내 상황에서 background-color : 흰색을 추가했습니다.
— Viktor Bogutskii
그러나을 설정 width: auto;하면 추가 된 svg 화살표가 선택 내용을 오버레이합니다. 16px의 오른쪽에 추가 패딩이 필요합니다. 그러나이 패딩은 모든 브라우저에서 볼 수 있으므로 다른 브라우저에서 디자인이 깨집니다. 아직 해결책이 없습니다 ...
— Klaas van der Weij
31

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

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}
— 요르단 314
소스
2
이것의 문제점은 outlineon 의 기본값 을 무시한다는 것입니다 :focus. 이 대답을 사용하려는 경우, 당신은 해야 당신의 변화 select:focus를 시각적으로 보여 스타일을 select요소가 활성 또는됩니다 :focus클릭에, 에드.
— Devin McInnis
@ jordan314 이 사진 의 둥근 모서리를 확인하십시오 . 경계 반경 : 0; select 태그에는 영향을 미치지 않습니다. 어쨌든 적어도 Chrome OSX에서는.
— Jammer
1
이상한 @ 7immy, 내가 여기에 크롬 OS X에도있어하고는 바이올린 위의 스크린 샷이다 imgur.com/r6ce6Yv
— jordan314
1
@ jordan314 어때요? jsfiddle.net/78xa6qud/2 . 선택의 배경과 배경의 배경이 같은 색상이면 벗어날 수 있다고 생각합니다.
— Jammer
@ 7immy 아 그래, 그 경고는 추측이다.
— jordan314
7

여기에 좋은 해결책이 있지만 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>
스 니펫 확장

— Aleemb
소스
6

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

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

— 리드 마틴
소스
4

맞춤 오른쪽 드롭 다운 화살표가있는 솔루션, 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>
스 니펫 확장

— Mihai Crăiță
소스
내 요구에 더 잘 맞는 배경 위치는 다음과 같습니다. background-position: calc(100% - 4px) center, 100% center;화살표가 선택의 중간으로 이동하고 오른쪽으로 이동합니다. 위대한 시작에 감사드립니다!
— 브랜든
3

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

— 대니 산토스
소스
1
나는 이것이 가장 단순하고 가장 신뢰할 수 있고 휴대 가능한 솔루션이라는 데 동의합니다.
— John Henckel
1

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

.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를 제거합니다. 최종 결과는 원하는대로 스타일을 지정할 수있는 깔끔한 밑줄이며, 드롭 다운은 사용자가 원하는대로 동작합니다.

— 고안자
소스
1

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

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

데모

— 마르코 알 로리
소스
0

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

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

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

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

— 맥 알라 한
소스
흠 OSX에 대해 잘 모르겠습니다. Windows (Chrome 버전 45.0)에서 다시 시도했지만 여전히 작동합니다. 문제를 플랫폼에 따라 더욱 이상하게 생각합니다 ...
— mcallahan
테두리를 설정하면 브라우저가 OS에서 제공하는 기본 콤보 상자를 사용하지 않고 콤보 상자 자체를 렌더링하기 때문입니다.
— Kong
0

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

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>
스 니펫 확장

— 아 미트
소스
0

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

  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;
  }
— 제롬 앤서니
소스
-1

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>
— 시티 무 니라 압둘 라자크
소스
-10

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

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

작동하는지보십시오.

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