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

CSS
この記事は約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の矢印が全ブラウザで消えます。
以上です!

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

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

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

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

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