web-dev-qa-db-ja.com

Mac OS Browser：Chromeの<select>要素のデフォルトの丸い境界線を削除します

'select'要素でCSSにborderプロパティを追加していません。また、次のCSSを追加しています。

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

Chrome（Mac OS））で丸い境界線が表示されていますが、なぜそうなのですか、どうすればそれを乗り越えることができますか？

htmlcssmacosgoogle-chrome
13
Sona

Css appearance プロパティを更新できます。

.select{ 
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;   
   -webkit-border-radius: 0;  /* Safari 3-4, iOS 1-3.2, Android 1.6- */    
   -moz-border-radius: 0;  /* Firefox 1-3.6 */     
   border-radius: 0;  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}
21
Pranav C Balan

それは古い質問ですが。右側に矢印をつけてみました。

select {
    color: #fff;
    background: #17406B;
    border: solid 7px #17406B;
    outline: #17406B solid thick;
    outline-offset: -5px;
}
4
Priyank Dey

これは機能するはずです：

select {
    background: #fff;
    color: #2dccd3;
    outline: #ffffff solid thick;
    outline-offset: -5px;
    -webkit-border-radius: 0px !important;
}
0
Ashhab