4

目的はBootstrapベースのCSSをカスタマイズして、

フォーム関連のborder-radiusを変更したい(1px)のですが、

Bootstrapは、sassの変数で、

$border-radius-base: 1px;
$border-radius-large: 1px;
$border-radius-small: 1px;

で変更できました。

input:selectについては、

select {
  border-radius: 1px !important;
}

が必要でした。
ここまではよいのですが、Chromeに関しては、

input:selectで上記のCSSでも角が4px程度のスタイルになってしまいます。

-webkit-appearance: none;でChromeのスタイルを解除できるのですが、

Bootstrapでのinput-smではpaddingがずれて、select要素(option)が正しく表示されません。

画像の説明をここに入力

なので、-webkit-appearance: none;を使わずに、

Chrome特有のスタイル(角の丸み)を解除(上書き)したいのです。

画像の説明をここに入力

1
  • 質問内容と直接関係ないコメントですみません。回答欄の運用の仕方について、気になるところがあったので話し合いができる場所を作りました。質問者の立場などからご意見あればよろしくおねがいします。
    – ento
    Commented 2014年12月3日 1:45

2 件の回答 2

2

こういうのはいかがでしょうか。

select {
    border: 0;
    outline: 1px solid #ccc;
    outline-offset: -1px;
}

div {
    padding: 10px;
}
select {
    border: 0;
    outline: 1px solid #ccc;
    outline-offset: -1px;
}
<div>
  <select>
    <option>1st</option>
    <option>2nd</option>
    <option>3rd</option>
  </select>
</div>


質問者です

試してみました。結果、角にサンカクができてしまいます。

画像の説明をここに入力

こちらではどうでしょう? 要は必要な select要素のスタイルを上記で上書きすれば良いと思います。

.form-control {
    border: 0;
    outline: 1px solid #ccc;
    outline-offset: -1px;
}

div {
    padding: 10px;
}
.form-control {
    border: 0;
    outline: 1px solid #ccc;
    outline-offset: -1px;
}
<div>
    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
</div>

4
  • こちらではどうでしょう? http://jsfiddle.net/0mzheav4/6/ 要は必要な select要素のスタイルを上記で上書きすれば良いと思います。
    – tgfjt
    Commented 2014年12月2日 9:43
  • いけました!が、 正確には、border-radius: 1px;としたいので、 完全な角にはしたくないのです・・・
    – kntmrkm
    Commented 2014年12月2日 10:02
  • 恐らく、それは -webkit-appearance: none;を使ったスタイルがふさわしいと思います。 > Bootstrapでのinput-smではpaddingがずれて こちらが再現出来る、HTML/CSS があると対応しやすいです。
    – tgfjt
    Commented 2014年12月2日 10:09
  • ありがとうございます。しかし、再現環境が厳しいのと、input-smに対してだけのパッチのCSSを当てるのは管理上煩雑になりそうなので増やさないようにしようと考えてます。デザインとしてはselectのみradius0pxで行こうと思います。
    – kntmrkm
    Commented 2014年12月2日 10:14
0

divでborderを引いて、selectで消す。
(参考)
http://jolie.leetheme.com/product-category/dreeses/?no-sidebar

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。