*

select要素(プルダウンなど)をCSSでデザイン調整する(SPサイト制作時)

   

pulldown
SPサイト制作にてフォームを作成する際、select要素(プルダウンなど)にCSSで幅とか調整してみてもうまくいかないので「appearance」プロパティを使用してデザイン調整をします。

スポンサードリンク
//appearanceプロパティを「button」に
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;

pulldown02

//「選択してください」の前に少し余白を入れたい
text-indent: 1em;

pulldown03

//appearanceをbuttonにして背景色を指定しただけだとプルダウンに見えないのでbackgroundに矢印画像を指定する
background:#EEE url(../img_common/arw_select_down.png) no-repeat;
background-size:20px 10px;
background-position: right center;

■追記 Firefoxブラウザではappearanceプロパティの「button」指定が効いてないっぽい

buttonの指定がうまく効いてないため、プルダウンの矢印はそのまま残って、背景の画像と矢印がかぶってしまう模様。
ということで、Firefoxのみに適用するhackを追加して、Firefoxブラウザの場合は背景無しにしました。

@-moz-document url-prefix() { /* for firefox */
	.content select {
		background:none;
		background-color: #FFF;
	}
}

CSSをまとめて書くと、こんな感じ。

//CSS
.content select {
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	text-indent: 1em;
	background:#EEE url(../img_common/arw_select_down.png) no-repeat;
	background-size:20px 10px;
	background-position: right center;
	height: 40px;
	line-height: 40px;
	font-size: 15px;
	vertical-align: middle;
	border:1px solid #CCC;
	margin-bottom:5px;
}
@-moz-document url-prefix() { /* for firefox */
	.content select {
		background:none;
		background-color: #FFF;
	}
}

 -iPhone, Web

Sponsored link

Sponsored link

  関連記事

k02

SBI証券から確定拠出年金のIDとパスワードが届きました

去年の12月中旬に書類を提出して、そのままストップしてた確定拠出年金がようやく始まりそうです。 SBI証券から管理画面の

p1

:beforeや:afterを使用した際、アイコンとテキストの上下を中央に合わせる

毎回やり方を忘れてしまうので自分用のメモです。 ※スマホ用でやってるので、IEなどのブラウザでは確認してません

code

CPIサーバで、htaccessに「mod_rewrite」を使用する場合のルール

しばらくハマってしまって、時間くってしまったので自分のためのメモです。 wordpressなどのCMSをインストールした

no image

ドラえもん素敵っす

素直にすごいなぁ〜と思いました。 画像を一切使わずにCSS3だけでドラえもんを描いてみた! CSS3かぁ。。やっとかない

基本にかえってバリデートチェックをしてくれるwebサービス

とりあえず、バリデートチェックとは? バリデートチェック: HTMLやCSSが正しく書かれているかチェックする HTML

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

共働きの30代女性。
福岡でWebに携わってます。
主に自分用の細かいメモを書いてます。
細かい内容が多いですが、他の方にも役立つなら幸いです。

確定拠出年金、退職したときに行う手続き(継続するor掛金停止する)

私、昨年から確定拠出年金をしております。 会社には確定拠出年金の制度がなかったので、「個人型年金」の加入者として掛金の拠

実は先月で退職しました

だいぶブログさぼっておりましたが、実は先月末で会社を退職しました。 別にこの歳になって、自主退職したわけじゃないのです。

mail
Thunderbirdのアドオン「QuickText」のテンプレが消えた?時の対処法

後で調べたら、QuickTextで割とよく見られる問題?のようですが、私は今回初めての体験だったので焦りました。 私の場

  • ブログランキング・にほんブログ村へ