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 回答