2

CSS でコンボ ボックスのデザインを変更することはできますか?

コンボのデザインを変更しましたが、ドロップダウン リストでクリックすると見苦しいスクロールバーが表示されます。どうにか変更できますか? JavaScript は使用せず、CSS のみを使用します。

これは私のCSSとHTMLです:

.dropDownList {
    background: white;
    width: 300px;
    line-height: 1;
    border: 1px;
    border-color: whitesmoke;
    border-radius: 4px;
    -webkit-appearance: none;
    background: url(arrow1.png) no-repeat right #fff;
    border-style: outset;
    padding: 2px 0;
}

<select onchange="document.location.href = &quot;/pepa/index.php?r=WppActs/create&amp;idp=1830&amp;ida=1&amp;idg=11&amp;idpod=-1&amp;result=arhiva&amp;idgod=&quot;+this.value+&quot;&amp;idbroja=-1&amp;idar=-1&amp;idgr=-1&amp;idvs=-1&amp;ids=-1&amp;idpo=-1&amp;idpm=-1&amp;idakta=-1&quot;" class="dropDownList" name="ID" id="ID">
    <option value="">Година</option>
    <option value="97">1945</option>
    <option value="163">1946</option>
    <option value="224">1947</option>
    <option value="283">1948</option>
    <option value="339">1949</option>
    <option value="375">1950</option>
    <option value="414">1951</option>
    <option value="452">1952</option>
    <option value="499">1953</option>
    <option value="565">1954</option>
    <option value="9974">1955</option>
    <!-- lots more options -->
</select>

リストの生成に使用される PHP は次のとおりです。

<?php
    $m = OgNumbers::model()->getYear();
    $list = CHtml::listData($m, 'ID', 'og_year');
    $select = $idGodine;

    echo CHtml::dropDownList('ID', $select, $list, array('empty' => 'Година','onchange' => 'document.location.href = "/pepa/index.php?r=WppActs/create&idp='.$idPaketa.'&ida='.$idOblast.'&idg='.$idG‌​rupa.'&idpod='.$idPodgrupe.'&result='.$result.'&idgod="+this.value+"&idbroja='.$i‌​dBroja.'&idar='.$idaRegistra.'&idgr='.$idgRegistra.'&idvs='.$idVrstaSuda.'&ids='.‌​$idSuda'"','class'=>'dropDownList','size'=>5));
<?php>
4

2 に答える 2

0

ajax DropDownまたはComboBoxコントロールを使用できます。変更可能なcssをサポートしています

于 2013-02-21T09:20:47.770 に答える
0

Webkit ブラウザーをターゲットにしているように見えるので、スクロールバーをカスタマイズするために使用できる疑似クラスがいくつかあります -良い例についてはhttp://css-tricks.com/custom-scrollbars-in-webkit/を参照してください。

疑似クラスは次のとおりです。

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

非常に単純なスタイリングは、次の疑似クラスを使用したこのデモのようなものです。

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color:lightblue;
}

::-webkit-scrollbar-thumb {
    background-color:blue;
}

編集：コンテナとして使用する更新されたデモ<ul>（コンテナであることが判明したため、コードは回答から削除されました<select>-編集された質問を参照してください）。

于 2013-02-21T09:21:30.583 に答える