6 
        <select>
               <option value="volvo">Volvo</option>
               <option value="saab">Saab</option>
               <option value="mercedes" selected>Mercedes</option>
               <option value="audi">Audi</option>
       </select>    

$('select').attr('disabled', 'disabled');

jQueryまたは単にJavascriptまたはHTMLで無効な選択の下向き矢印を削除することは可能ですか?

jsfiddle

4

7 に答える 7

4

それは不可能です（特にすべてのブラウザで機能する方法ではありません）。

無効にした選択ボックスにはまだ矢印が付いているので、とにかくこれを行うべきではありません。通常、ユーザーのOSが通常行う方法とは異なる方法でそのようなことを行うのは悪いことです。

于 2012-07-24T19:00:36.720 に答える
2

親でcssoverflow：hiddenを使用することもできます。そうすれば、矢印を削除して、選択ボックスを右にトリミングできます。

CSS：

<style>
    .selectParent{width:80px;overflow:hidden;}
    .selectParent>select{width:100px;}
</style>

マークアップ：

 <div class="selectParent">
     <select>
           <option value="volvo">Volvo</option>
           <option value="saab">Saab</option>
           <option value="mercedes" selected>Mercedes</option>
           <option value="audi">Audi</option>
     </select>  
 </div>
于 2012-07-24T19:22:38.760 に答える
2

いいえ、これは不可能です (少なくともクロスブラウザー)。@ThiefMaster が (+1) と言うように、ユーザーの UI の予想される規範を乱しているため、いずれにしても良い考えではありません。

それにもかかわらず、あなたが主張するなら、私が約100年前に作ったこのようなselectタグではなく、ドロップダウンのHTMLシミュレーションを使用する必要があります. 最近はおそらくもっと良いものがあります。

于 2012-07-24T19:06:49.697 に答える
1

そのようには行われていません。

通常、「スタイル付き」の選択は、ドロップダウンの雰囲気を与えるために css の色、グラデーション、画像などが適用された別のタイプの要素にすぎません。

たとえば、選択肢のドロップダウンを使用して、代わりに入力を配置できます。

CSS

.input.select { background: url('downarrow.jpg') no-repeat right top; }
.selectOptions { display: block; width: 100px; height: 200px; background: white; }

マークアップ

<div>
    <input type="text" class="select" value="click me" />
    <div class="selectOptions">
        <ul>
            <li val="some custom value">option</li>
        </ul>
    </div>
</div>

そしてjqueryでは、次のようにします：

$('input.select').bind('click', function() {
    $(this).find('div.selectOptions').toggle();
});

$('div.selectOptions ul li').bind('click', function() {
    var val = $(this).attr('val');
    // update the input upon click.
    var input = $(this).parent().parent().parent().find('input.select');
    input.val( val );
});

もちろん、すでにそのようなことを行う他の誰かのクロスブラウザライブラリを使用することもできます... jQuery UIのように。

于 2012-07-24T19:06:32.007 に答える
1

不可能です。

このようなことを試してください。(CSSでカスタマイズ)

$('select').change(function(){
    $('<input />').val($(this).val()).appendTo($(this).parent()).attr('readonly','readonly').attr('disabled','disabled');
    $(this).remove();
});

ページの読み込み時に選択がすでに値を持っている場合。

var mySelectBox = $('select');
$('<input />').val($(mySelectBox).val()).appendTo($(mySelectBox).parent()).attr('readonly'‌​,'readonly').attr('disabled','disabled');
$(mySelectBox).remove();
于 2012-07-24T19:04:14.033 に答える
1

Webkit (Chrome、Safari)では、 Cssで指定できます:

-webkit-appearance: none;
代わりに、
-webkit-appearance: menulist;

この方法では、事前にフォーマットされた Css を選択することはありません。つまり、矢印はありません。
しかし、ThiefMasterが言ったように、OSが通常行うようにそれを維持するのが最善です。

于 2012-07-24T19:05:09.150 に答える