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

143

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

どれも動作していません。

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

何か案は？

select  webkit  css 
— Maxedison
ソース
コードも投稿していただけませんか？jsfiddle.netを使用して投稿するとさらに良いです。
— ngen
1
Win7上のChrome 10のデフォルトスタイルとして、border-radiusを実際に設定していません。これは別のバージョンまたはOSですか？
— ウェズリー・マーチ
Windows 7上のChrome 12にも角の丸みはありません。
— -andyb
1
それは、Mac OS X上だと述べている必要があります
— maxedison

回答:

244

これは私にとってはうまくいきます（ドロップダウンリストではなく最初の外観をスタイルします）：

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

http://jsfiddle.net/fMuPt/

— アントニ
ソース
179
丸みを帯びた角を取り除くが、矢印を右側に保つ方法はありますか？
— 2014年
3
矢印を追加する必要があります。たとえば、位置100％、50％、繰り返しなしの属性を持つ背景画像として。追加のhttpリクエストを回避するために、cssでbase64エンコードされた画像も使用しました。
— Karl Adler
26
あなたが使用している場合それは私のために働い@Adam border: 0などのアウトラインを追加しますoutline: 1px inset black; outline-offset:-1px
— フィリペ・ペレイラ
1
@FilipePereiraいいですね。アウトラインオフセットはIEでサポートされていないため、追加する必要があります。
— Tim
6
これにより、ユーザーエクスペリエンスに許容できないほどの悪影響を与える右側の矢印が削除されます。代わりに、ドロップダウンbackground-color: #yourbgをスタイルし、ドロップダウンのborder-style: none直前にposition: absoluteand border-bottom: 1px solid #youpickおよびでdivを作成しますdisplay: inline。矢印は保持され、UXは無害です。
— 設計者、2016年
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アイコンを使用するためのアドバイスはありますか？
— Nicolas Thery
FontAwesomeはアイコンのコレクションですが、必要なアイコンは1つだけです。したがって、icomoon.ioなどのツールを使用してFAアイコンの1つを抽出した後、そのアイコンをsvgまたはpngファイルとしてエクスポートし、CSSからリンクする必要があります
— Afzal Hossain
素晴らしい解決策ですが、私の状況ではbackground-color：whiteを追加しました。
— Viktor Bogutskii
ただし、を設定するwidth: auto;と、追加されたsvg矢印が選択の内容をオーバーレイすることに注意してください。これには、16pxの右側に追加のパディングが必要です。ただし、このパディングはすべてのブラウザーで表示され、他のブラウザーのデザインを壊します。まだ解決策はありません...
— Klaas van der Weij
31

四角いボーダーが必要で、それでも小さなエキスパンダー矢印が必要な場合は、これをお勧めします：

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}
— ヨルダン314
ソース
2
これに伴う問題は、デフォルト上書きすることであるoutlineのを:focus。この回答を使用する場合は、select:focusスタイルを変更して、select要素が:focusクリックされたときにアクティブになる（編集される）ことを視覚的に示す必要があります。
— Devin McInnis
@ jordan314 この写真の角の丸い部分を確認してください。ボーダー半径：0; selectタグには影響しません。少なくともChrome OSXではとにかく。
— ジャマー
1
@ 7immy奇妙です。私もChrome OS Xを使用しています。上記のフィドルのスクリーンショットです。imgur.com/r6ce6Yv
— jordan314
1
@ jordan314これはどうですか？jsfiddle.net/78xa6qud/2。選択の背景とその背後の背景が同じ色であれば、それでうまくいくと思います。
— ジャマー2015年
@ 7immyああそうだ、それは警告だと思う。
— jordan314 2015年
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

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

私の解決策は、selectの後ろに白いdiv（border-radius：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>
スニペットを展開

— ミハイ・クリザ
ソース
私のニーズにより適切に機能するバックグラウンドポジショニングは次のとおりです。background-position: calc(100% - 4px) center, 100% center;これにより、矢印が選択の中央に移動し、右端に移動します。素晴らしいスタートをありがとう！
— ブランドン
3

シンプルにして矢印などの機能をいじるのを避ける1つの方法は、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が提供する基になるものを使用するのではなく、ブラウザーがコンボボックス自体をレンダリングするためです。
— 香港
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で定義されているデフォルトのborder-lightクラスがある場合は、それを直接使用できます。境界線を白として定義するだけです）。ボーダーを正方形に変更/半径を削除し、矢印を維持しました。

これが私がしたことです：

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

定義済みのborder-lightがない場合は、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

動作するかどうか試してください。

— AbhiRoczz ...
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.