selectフォームのborder-radiusをChromeでも変更するには?

投稿者: Anonymous

目的は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特有のスタイル(角の丸み)を解除(上書き)したいのです。

画像の説明をここに入力

解決

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

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

_x000D_

_x000D_

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

_x000D_

<div>
  <select>
    <option>1st</option>
    <option>2nd</option>
    <option>3rd</option>
  </select>
</div>

_x000D_

_x000D_

_x000D_


質問者です

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

画像の説明をここに入力

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

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

_x000D_

_x000D_

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

_x000D_

<div>
    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
</div>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *