ドロップダウンボックスに2つのアイテム、選択できないデフォルトと最初の選択可能なアイテムを表示するにはどうすればよいですか?

user6402310

HTMLとCSSを使用して、カーソルを合わせたりクリックしたりせずに、選択できないデフォルト(タイトル)と最初の選択可能なアイテムの2つのアイテムを表示するドロップダウンメニューを作成するにはどうすればよいですか?

現時点では、これをすべて取得しています。これは、タイトルアイテムのみを示しています。

HTML

<select class="select-box" id="form" onChange="window.location.href=this.value">
<option value="">Select</option>
<option value="http://foobar.com/1.html">1</option>
<option value="http://foobar.com/2.html">2</option>
<option value="http://foobar.com/3.html">3</option>
<option value="http://foobar.com/4.html">4</option>
</select>

CSS

.select-box {border:1px solid #000; height:18px; text-align: center; }
form input[type="text"] {
    height: 14px; width: 200px;
    margin-top: 3px; color: #000; border: 1px solid #000; }
ソル

要素でsize属性を使用できますselectまた、heightこれが機能するようにプロパティを削除します。

.select-box {
  border: 1px solid #000;
  text-align: center;
}

form input[type="text"] {
  height: 14px;
  width: 200px;
  margin-top: 3px;
  color: #000;
  border: 1px solid #000;
}
<select class="select-box" id="form" onChange="window.location.href=this.value" size="2">
<option value="">Select</option>
<option value="http://foobar.com/1.html">1</option>
<option value="http://foobar.com/2.html">2</option>
<option value="http://foobar.com/3.html">3</option>
<option value="http://foobar.com/4.html">4</option>
</select> CSS

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ