249


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

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

Bootstrapは、sassの変数で、

[code]

    $border-radius-base: 1px;
    $border-radius-large: 1px;
    $border-radius-small: 1px;
    
[/code]

で変更できました。

`input:select`については、

[code]

    select {
      border-radius: 1px !important;
    }
    
[/code]

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

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

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

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

![画像の説明をここに入力](https://i.stack.imgur.com/mVxMT.png)

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

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

![画像の説明をここに入力](https://i.stack.imgur.com/uqFqe.png)


CC BY-SA 3.0
2014-12-02T08:44:33.983
246
2019-12-13T13:32:47.470
512
question
css google-chrome
selectフォームのborder-radiusをChromeでも変更するには？


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

[code]

    select {
        border: 0;
        outline: 1px solid #ccc;
        outline-offset: -1px;
    }
    
[/code]

[code]

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

[code]

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

* * *

> 質問者です
>
> 試してみました。結果、角にサンカクができてしまいます。
>
> ![画像の説明をここに入力](https://i.stack.imgur.com/PPK7D.png)

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

[code]

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

[code]

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

[code]

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


CC BY-SA 4.0
2014-12-02T09:30:54.407
249
2019-12-13T13:32:47.470
2020-06-17T08:14:45.997
-1
621
246
answer


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


CC BY-SA 3.0
2018-01-05T17:54:15.457
40759
2018-01-05T17:54:15.457
26897
246
answer