Question

是否可以在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>

Answer 1

您可以使用ajax DropDown或ComboBox控件。它支持你可以修改的css

Answer 2

由于看起来您正在使用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

使用以下伪类，非常简单的样式可能类似于this demo：

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

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

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

修改：使用<ul>作为容器的更新demo（现在代码已从答案中删除，因为原来该容器为<select> - 请参阅已编辑的问题）。

如何在css中更改我的下拉列表的设计

2 个答案: