2020.10.05  2021.04.04

HTML5 セレクトボックス(select)のデフォルト矢印を消す方法

こんにちは!マコブログです!

本日は、HTMLのセレクトボックスにあるあの矢印を消す方法をご紹介します!

↑↑↑↑↑↑↑↑↑
これのことです。

そもそも、このセレクトボックスのマーク、指定してないのに勝手に出てくるんですよね…。

しかも一番厄介なのがCSSでは簡単に消せないということです。

なぜなら、このマークは、ブラウザのデフォルトのCSSで指定されているものだからです。

「え?ってことは、ブラウザによって表示変わるの!?」と思ったかもしれませんが、変わるんです…。

←これグーグルクロム

←これファイヤフォックス

ね?全然違うでしょう?

これが厄介なんですよ、まあ今回紹介するCSS「appearance」を使用すればこの悩みも一瞬でなくなります。


実際に使ってみる

それでは実際にセレクトボックスのあのマークを消してみましょう!

まずはhtmlファイルとcssファイルを用意して…、htmlファイルにセレクトボックスを適当に表示させてください。

そしてそのセレクトボックスに「appearance: none;」をあてると…。

↓↓↓↓

うおおおおお!!うざいマークが一瞬で消えた!

実はこの「appearance: none;」は、ブラウザのデフォルトのCSSを取り除くことができちゃうんです…。

ってことは…。

そうです!おきずきの通り!

input」、「button」などのタグにも有効なんです!!

おお…。これでデザインの幅が広がりましたね!

是非皆さんも、ブラウザのデフォルトのCSSを取り除きたい!となったらこちらのCSSを使用してみてください!

こちらの記事も是非チェックしてみてください↓
WordPressを始める前に必ず抑えておくべき基本知識

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →