11

<select>HTML5タグを使用して、Web ページにドロップダウン ボックスがあります。「読み取り専用」、つまりテキストとしてのみ表示したい場合があります。例えば：

「読み取り/書き込み」にしたい場合があります。

読み書き

また、「読み取り専用」にしたい場合もあります。

ここに画像の説明を入力

「disable」属性は使用しない方がよいでしょう。安っぽく見えると思いますが、何も利用できない場合に、ユーザーに何らかの選択肢があることを意味します。

CSS を使用して、現在のオプションの外観をselect通常のテキストに変換することは可能ですか?

4

4 に答える 4

13

はい、CSS を使用します。

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; 
    border: none;
    /* needed for Firefox: */
    overflow:hidden;
    width: 120%;
}

例：

http://jsfiddle.net/eG3dS/

「Firefox に必要」セクションのため、選択ボックスのサイズを制限する div または span を作成する必要があります。FFがここを尊重しないのは残念だmoz-appearance。

これにより通常のテキストのように見えますが、選択ボックスとして機能することに注意してください。「無効」属性を使用してフォントの色を変更するなど、何らかの方法で無効にする必要があります。

于 2013-03-28T19:54:27.890 に答える
5

WebKitでは、次を使用して実行できます-webkit-appearance: none;

select {
    -webkit-appearance: none;
    border: none;
}

デモ: http://jsfiddle.net/ThiefMaster/56Eu2/2/

ユーザーが実際に選択ボックスを使用できないようにするには、それを無効にする必要があります (disabled属性)。

-moz-appearanceこれは非常に非標準的であり、たとえば、動作しないことに注意してください! プロパティの-*-appearance動作はさまざまなブラウザで異なり、Mozillaは Web サイトではまったく使用しないことを推奨しています。

このプロパティは Web サイトでは使用しないでください。標準ではないだけでなく、ブラウザによって動作が異なります。キーワード none でさえ、異なるブラウザーの各フォーム要素で同じ動作をするわけではなく、まったくサポートしていないものもあります。

于 2013-03-28T19:42:50.357 に答える
0

最も簡単な方法は、select の横にスパンを配置し、select でイベント リスナーを使用してそのテキストをスパンにコピーし、select または span を表示するかどうかを切り替えることだと思います。少しJavascriptですが、多くの制御が可能です。

于 2013-03-28T19:36:44.450 に答える
-2

カスタム ドロップダウンを作成し、CSS でスタイル設定された無効状態にすることができます。

これを設定できる非常に優れた jQuery プラグインがあります: http://uniformjs.com/

于 2013-03-28T19:36:57.467 に答える