プルダウンメニュー(セレクトボックス)要素を右揃えしようと思ったけど、出来なかったのでメモ

CSS

プルダウンメニュー(セレクトボックス)要素を右揃えしようと思ったけど、出来なかったのでメモ

 状態:不明  閲覧数:7,542  投稿日:2011-07-31  更新日:2011-07-31
プルダウンメニュー(セレクトボックス)要素を右揃えしようと思ったけど、出来なかった。

今後、また挑戦することにないよう、メモしとく。
(何度も同じことやるのは、無駄なので…)<やりたかったこと>
・プルダウン内、日付の右揃え(1桁の月、1桁の日を、2桁のものと右揃えであわせたかった)

<試したこと>
・<select>タグにclass pulldownを設定

.pulldown option{
width:15px;
text-align: right
}

※widthを指定した理由は、プルダウンの横幅が大きくなり過ぎて、右位置過ぎる表示となるのを防ぐため
※縦幅によって、「上下シークバーが出るプルダウン」と「出ないプルダウン」があるのだが、その設定はどこで行うか不明

<結果>
・FF5.0 … O.K.
・IE9.0 … N.G.左揃えになる。理由不明

結局、諦めた。


なお、調べていく内、いい感じかな、と思ったのは、
▽selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js) :: 5509
  http://5509.me/log/jqueryselectable

但し、「jQueryプラグイン」ってことで、
jQuery読み込んだり、「jQselectable.js」ダウンロードが必要みたい。


要素を右揃えしたかっただけなのに、何か大げさかな、と思い、
導入は見送りにした。

もし、試すにしても、表示系は、
裏のスクリプトが完成した後の、
一番最後になると思う。


後、今回、調べていて思ったのが、

「プルダウンメニュー」で検索すると、
ドロップダウンメニューに関するエントリーが大量に出てきて、
まいったよ。

呼び方間違ってるのかな?

「プルダウンメニュー」じゃなくて、
「セレクトメニュー」が正しいの?

それとも、「セレクトボックス」?


ここら辺、あんまり使ったことがないから、
よく分かんないんだよね…


リストタグではない、リスト内画像の縦位置調整

CSSで画像をロールオーバー



類似度ページランキング
順位 ページタイトル抜粋
1 プルダウンメニュー(セレクトボックス)要素を右揃えしようと思ったけど、出来なかったのでメモ 91
2 Chromeシークレットモードで、ウインドウ幅をリサイズしようとすると、下限制限を受ける 36
3 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい 36
4 親要素の横幅を越えたヘッダー/レスポンシブ対応 35
5 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく 35
6 CSSキーフレームアニメーションで、マウスアウト時に独自のアニメーションを設定することは出来ない 34
7 Chrome で右クリックから保存しようとするとフリーズする → フォルダーオプションで「別のプロセスでフォルダーウィンドウを開く」 34
8 ダウンロードしたモックアップベクター素材の感想を書いてみる予定のエントリー 34
9 ディスプレイ比較の重要性/画像が重要な意味を占めるサイトで、何か違うなと感じたら 33
10 perspectiveのベンダープレフィックスを自動付与したい 32
11 トリミングする際、範囲を決定する入力ボックスが表示されなかったら 31
12 お使いのコンピュータ ネットワークから通常と異なるトラフィックが検出されました 31
13 「Webページへのリンク」をクリックした際、Chrome起動オプションを適用させるには、レジストリを書き換えるしかない 31
14 Firefox 8.0 にしたら、Firebugタイトル部分の半角スペースに‌·が入るようになったので、メモ 30
15 モバイルデザイン1 / スマホサイトのベースとなるフレームワークを検討 30
16 Chromeをインストール出来ない 29
17 iframe経由で読み込んでいるページへ直接アクセスした場合は、トップページへリダイレクト 29
18 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない 28
19 CSS の class名 と id名 を、全プロジェクトで意識的に統一しようかと 28
20 レスポンシブスマホサイトで、意図せず横スクロールが発生する場合は、URLを折り返し表示するよう設定 28
2025/2/05 16:54 更新
週間人気ページランキング / 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 22
2 16進数カラーコード / 2進数 11
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 9
4 鉄道会社毎のカラーコード | カラーコード(色) 7
5 キャラクター無料着せ替えジェネレーター Dress up game / オンラインサービス | イラスト参考(デザイン) 6
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 5
7 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
7 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 4
7 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 4
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3
8 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
8 拡張機能が Chrome によって無効にされました / この拡張機能は破損している可能性があります。 | Chrome 拡張機能 3
9 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 2
9 Design 0 2
9 RGBの種類 / ビットカラー | RGB(色) 2
9 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
9 色空間 / 表色系 / 顕色系 / 混色系 2
9 「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 | AI画像生成 2
2025/2/5 1:02 更新