【CSS】selectの枠線・矢印を消す方法

この記事は約2分で読めます。
広告

CSSでselectをデザインする時、邪魔だなと思う枠線と矢印。
そんな枠線、矢印を消す方法のご紹介です。

selectの枠線を消すCSS

select {
  outline: none;
}

あまり聞いたことないスタイルプロパティの「outline」ですが「outline」には、
「outline-color」、「outline-style」、「outline-width」が含まれ、アウトラインのスタイルと太さ、色の指定が可能です。
「outline: none」は、「outline」の中の「outline-style」を指定しており
「none」の他には、「solid(1本線)」、「double(2本線)」、「grooveまたはinset(立体的なへこんだ線)」、「ridgeまたはoutset(立体的に突起した線)」、「dashed(破線)」、「dotted(点線)」があります。
もし表示指定する場合は、ご参考にしてください。

selectの矢印を消すCSS

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* ie対応 */
select::-ms-expand {
  display: none;
}

矢印を消す方法は「appearance: none;」だけでは上手くいかず
ベンダープレフィックスの対応とインターネットエクスプローラー(ie)用に別の指定もしなくちゃいけません。
少し記述が多くなってしまいますがこれを書けばselectの矢印が全ブラウザで消えます。
以上です!

エンデ・バタローをフォローする
CSSサイト制作

埼玉県北本市に住み始めて2年目。

前は東京都の京王線沿線に。
その前は神戸の三宮に。
その前は名古屋の八事霊園の近くに住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて9年目になります。
最近は、ずっとwordpressをいじっており
エディタはVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました