CSSのクラスを選択すると、スパムのように見えます。

Question

私はいくつかの条件に基づいてスパンのような選択をするようにしようとしています。私は入力ボックスとうまく動作する次のCSSクラスがありますが、それはドロップダウンで動作しません。任意のガイダンスどのように私はスパンのような選択をスパンの代わりに置き換えるのではなく、

それ disabledことについてどのように

jQueryの機能

function makeReadOnly(context) { 
    $('input, select', context).each(function() { 
    $(this).addClass('readOnlyInput'); 
    });​ 
} 

CSS

.readOnlyInput 
{ 
    border-width: 0; 
    background-color: Transparent; 
    text-align: right; 
} 

Answer 1

あなただけのspanでselectを置き換える必要があります。それはあなたがやろうとしていることをする標準的な方法です.はシステムコントロールなのでselect以外のものに見えるようにするのが難しいでしょう。 select要素は、異なるブラウザ/オペレーティングシステムでも同じように見えません。なぜなら、Web開発者は、それをスタイル変更する能力がないからです。

でもあなたの標準的なモデルチェンジコンボボックスと、このような、そこに利用可能な多くのjQueryのプラグインのように、元selectを隠し、div Sと、このような一連のと交換してください。

Answer 2

：

function makeReadOnly(context) { 
    $('input, select', context).each(function() { 
     $(this).attr('disabled', 'disabled'); 
    });​ 
} 

W3C勧告：

ユーザーの入力が望ましくないか無関係なコンテキストでは、 は、コントロールを無効にするか、読み取り専用にすることができることが重要です。 たとえば、 ユーザーがいくつかの必要なデータを入力するまで、フォームの送信ボタンを無効にすることができます。同様に、作成者は に、フォームと共に値 として送信する必要がある読み取り専用テキストを含めることができます。以下のセクションでは、無効化された、および読み取り専用のコントロールである について説明します。

http://www.w3.org/TR/html4/interact/forms.html#h-17.12

Answer 3

できません。ドロップダウンに表示される矢印を削除するスタイルはありません。

スパンのようにしたい場合は、ドロップダウンをスパンに置き換えます。他のすべてのハックは、ブラウザと互換性がないか、単純に複雑になることはありません。

このような方法の1つはHow to remove the arrow from a select element in Firefox

Answer 4

ない実行可能な解決策を矢印非表示にするには、しかし、あなたは矢印の色を変更することはできませんので、あなたはそれがspanタグのように見えるようにするために選択ボックスのために黒の背景色を設定する必要があります他の何か。

background-color: black; 

Answer 5

SELECTスタイルの試行は致命的です。 pageloadのSELECTを、SELECTのように見え、動作するリストに置き換えますか？完全に実行可能：http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

常にアクセシビリティを念頭に置いてください。