主页 / 问题 / 670629
Accepted
Byulent
Asked:2020-05-25 18:01:57 +0000 UTC2020-05-25 18:01:57 +0000 UTC

样式化选择标签

  • 772

您需要使用纯 CSS 来设置 select 标签的样式。我尝试这样做，但是当您单击向下箭头时，列表不会打开，您需要单击该字段本身。

* {font-family: Arial}
#search {
    height: 270px;
    width: 310px;
    /*background: #fff65f;*/
    overflow: hidden;
}

#search-form {
    background: #8bab40;
    color: #ffffff;
    padding-left: 40px;
    padding-top: 14px;
}

#search-form input[type="text"], select {
    width: 230px;
    background: #afc968;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: Arial;
    color: #557013;
}

#search-form input[type="text"]{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.select span{
    position: relative;
    top: 2px;
    right: -3px;
}

.select-button {
    float: right;
    width: 18px;
    height: 18px;
    position: relative;
    /*z-index: -9999;*/
    top: 7px;
    right: 42px;
    background: #77993a linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    border: #70902b 1px solid;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

#search-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
<div id="search">
<div id="search-form">
                <form>
                    <label>Keyword(s)</label><br>
                    <input type="text">
                    <label>Category</label><br>
                    <div class="select">
                    <select>
                        <option>--select--</option>
                    </select>
                        <div class="select-button"><span class="caret"></span></div>
                    </div>
                </form>
            </div>
            </div>

这里还需要做什么？

html

1 个回答

  1. Best Answer

    如果添加以下内容：

    .select-button {
   ...
   pointer-events:none
}

    箭头将变得对单击透明，当您单击它时，该字段将被按下。

    同时，仍然可以使用视图选择器设置其对鼠标的反应（悬停、活动等） select:hover + .select-button

    * {font-family: Arial}
#search {
    height: 270px;
    width: 310px;
    /*background: #fff65f;*/
    overflow: hidden;
}

#search-form {
    background: #8bab40;
    color: #ffffff;
    padding-left: 40px;
    padding-top: 14px;
}

#search-form input[type="text"], select {
    width: 230px;
    background: #afc968;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: Arial;
    color: #557013;
}

#search-form input[type="text"]{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.select span{
    position: relative;
    top: 2px;
    right: -3px;
}

.select-button {
    float: right;
    width: 18px;
    height: 18px;
    position: relative;
    /*z-index: -9999;*/
    top: 7px;
    right: 42px;
    background: #77993a linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    border: #70902b 1px solid;
    pointer-events:none
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    
}

#search-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
    <div id="search">
<div id="search-form">
                <form>
                    <label>Keyword(s)</label><br>
                    <input type="text">
                    <label>Category</label><br>
                    <div class="select">
                    <select>
                        <option>--select--</option>
                    </select>
                        <div class="select-button"><span class="caret"></span></div>
                    </div>
                </form>
            </div>
            </div>

    • 2

相关问题