web-dev-qa-db-ja.com

Chrome / Webkitの<select>要素から角丸を削除する

Chromeのユーザーエージェントスタイルシートは、<select>要素のすべての角に5pxの境界半径を与えます。私は、外部スタイルシートと要素自体にインラインで半径0pxを適用することにより、これを取り除くことを試みました。 border-radius:0pxと-webkit-border-radius:0px;の両方を試してみましたが、さらに具体的なborder-top-left-radius:0pxを試してみました（-webkitと同等）。

動作していません。

Webkitの開発者ツールで要素を調べても、計算スタイルには半径が5pxと表示されます。しかし、詳細を表示するためにその横の展開矢印をクリックすると、element.style-0pxと表示されます。そして、その下に、5pxのユーザーエージェントスタイルシート仕様とともに、0pxの外部css仕様を示します。そして、後者の2つは、あるべきように取り消し線で消されています。

何か案は？

cssselectwebkitcss3
127
maxedison

これは私のために機能します（ドロップダウンリストではなく最初の外観をスタイルします）：

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

http://jsfiddle.net/fMuPt/

226
antonj

ドロップダウン画像を使用した私のソリューション(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='#444' 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;
}

代替（上記は最新のFirefoxで動作しないため）

select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("https://image.flaticon.com/icons/svg/60/60781.svg");
    background-position: 99% 50%;
    background-repeat: no-repeat;
    background-size: 16px;
}

bootstrapを使用しているため、select.form-controlを使用しました。
代わりにselect{またはselect.your-custom-class{を使用できます。

77
Afzal Hossain

正方形の境界線が必要で、まだ小さなエキスパンダー矢印が必要な場合は、次をお勧めします。

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

ここでいくつかの良い解決策がありますが、これは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>
7
aleemb

一番上の回答では境界線が削除されますが、矢印も削除されるため、ユーザーが要素を選択として識別することは不可能ではないにしても、非常に困難になります。

私の解決策は、selectの後ろに白いdiv（border-radius：0px）を貼り付けることでした。その位置を絶対位置に設定し、その高さを選択の高さに設定すると、準備完了です！

5
Reed Martin

カスタム右ドロップダウン矢印を使用したソリューションは、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>
3
Mihai Crăiță

シンプルに保ち、矢印などの機能を使用しないようにする1つの方法は、selectタグと同じ背景色のdivに格納することです。

1
Danny Santos

挿入ボックスシャドウは、トリックを行います。

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

デモ

1
Marco Allori

よく私は解決策を得た。それがあなたを助けるかもしれないことを願っています:)

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
Amit

矢印の削除は避けてください。ドロップダウン矢印を保持する解決策は、最初にドロップダウンからスタイルを削除することです。

.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が新しい行に移動しないようにし、絶対位置はページのフローからそれを削除します。最終的な結果は、必要に応じてスタイル設定できるきれいな下線であり、ドロップダウンはユーザーが期待するとおりに動作します。

0
devigner

何らかの理由で、実際には境界線の色の影響を受けますか？標準色を使用すると、角は丸みを帯びたままになりますが、色を少しでも変更すると、丸みはなくなります。

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

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

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

0
mcallahan