# セレクトボックスのデザインの変更

**URL:** <https://www.nocode-faq.com/t/topic/2150>\
**Category:** bubble\
**Created:** [2021 年 9 月 8 日午後 9:38 UTC](https://www.nocode-faq.com/t/topic/2150 "2021-09-08T21:38:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![yasuda.yuu15](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yasuda.yuu15/32/4534_2.png) [@yasuda.yuu15](https://www.nocode-faq.com/u/yasuda.yuu15)\
**Post date:** [2021 年 9 月 8 日午後 9:38 UTC](https://www.nocode-faq.com/t/topic/2150/1 "2021-09-08T21:38:47Z")

</div>

添付画像1枚目のような見た目のチェックボックスを作りたいと思っております。  
具体的にはチェックボックス内を白単色にして、下矢印の部分も白単色にしたいと思っています。  
GUI上での操作だと難しそうだったので、CSS Toolsを使用しています。

PC上ではうまくいっているように見えるのですが、スマホ上だとうまくできません（画像2,3枚目）。  
使用しているのはiPhone SE2でSafariとChromeと両方試しました。

### スクリーンショット

1枚目（理想のチェックボックス）

 ![理想のチェックボックス](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/84ed898777ec227c91b72715aeaa4d1a4ce5ac29.png)

2枚目（CSS適用前）

 ![CSS適用前](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/7e72c2b0aa0f3f0c609e17fd7663eccab7e40ae4.png)

3枚目（CSS適用後）

 ![CSS適用後](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/663e2352c2a941d4335489f69a98cb737c0c1832.png)

### 試したこと

CSSにImportantを付けたくらいです（CSS初心者のため。。）。

編集権限を付与したのでこちらからご確認いただけますと幸いです。  
[https://bubble.io/page?type=page&name=index&id=rensyu-yy&tab=tabs-1](https://bubble.io/page?type=page&name=index&id=rensyu-yy&tab=tabs-1)

---

<div class="post-metadata">

**Author:** ![K.nakata](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/k.nakata/32/1810_2.png) [@K.nakata](https://www.nocode-faq.com/u/K.nakata)\
**Post date:** [2021 年 9 月 9 日午前 1:11 UTC](https://www.nocode-faq.com/t/topic/2150/2 "2021-09-09T01:11:47Z")

</div>

この記事参考に試してみてください

> **[Removing Shadow Style from Dropdown Menu in Safari](https://forum.bubble.io/t/removing-shadow-style-from-dropdown-menu-in-safari/33044)**
>
> Hi everyone, Question. Is it possible to remove the shadow style from the dropdown menus in Safari? I have it set to Shadow Style: None, yet there is the shadow / gradient effect. I’m sure this is apple’s automatic way of displaying dropdown menus,...

---

<div class="post-metadata">

**Author:** ![yasuda.yuu15](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yasuda.yuu15/32/4534_2.png) [@yasuda.yuu15](https://www.nocode-faq.com/u/yasuda.yuu15)\
**Post date:** [2021 年 9 月 9 日午後 2:13 UTC](https://www.nocode-faq.com/t/topic/2150/3 "2021-09-09T14:13:43Z")

</div>

ご連絡遅くなり申し訳ございません。

無事できました！！  
本当にありがとうございます！！

---

<div class="post-metadata">

**Author:** ![K.nakata](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/k.nakata/32/1810_2.png) [@K.nakata](https://www.nocode-faq.com/u/K.nakata)\
**Post date:** [2021 年 9 月 9 日午後 10:57 UTC](https://www.nocode-faq.com/t/topic/2150/4 "2021-09-09T22:57:42Z")

</div>

よかったですー！