select标签 style设置

White feathe

发布于 2021-12-08 14:23:02

2.6K0

文章被收录于专栏：White feathe 的博客White feathe 的博客

select标签 style设置

如下图所示我要所说的效果：未改变前

可以通过css来改变，从而达到如下效果图，代码附上：

通过CSS来改变

vertical-align:middle;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

demo附上：

<!DOCTYPE html>
<html>

    <head>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telphone=no, email=no" />
        <title></title>
        <style type="text/css">
            /* SELECT W/IMAGE */

            select#selectTravelCity {
                width: 14em;
                height: 3.2em;
                padding: 0.2em 0.4em 0.2em 0.4em;
                vertical-align: middle;
                border: 1px solid #e9e9e9;
                -moz-border-radius: 0.2em;
                -webkit-border-radius: 0.2em;
                border-radius: 0.2em;
                box-shadow: inset 0 0 3px #a0a0a0;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                /* sample image from the webinfocentral.com */
                font-family: Arial, Calibri, Tahoma, Verdana;
                font-size: 1.1em;
                color: #000099;
                cursor: pointer;
            }

            select#selectTravelCity option {
                font-size: 1em;
                padding: 0.2em 0.4em 0.2em 0.4em;
            }

            select#selectTravelCity option[selected] {
                font-weight: bold
            }

            select#selectTravelCity option:nth-child(even) {
                background-color: #f5f5f5;
            }

            select#selectTravelCity:hover {
                color: #101010;
                border: 1px solid #cdcdcd;
            }

            select#selectTravelCity:focus {
                box-shadow: 0 0 2px 1px #404040;
            }
            /*SELECT W/DOWN-ARROW*/

            select#selectPointOfInterest {
                width: 185pt;
                height: 40pt;
                line-height: 40pt;
                padding-right: 20pt;
                text-indent: 4pt;
                text-align: left;
                vertical-align: middle;
                box-shadow: inset 0 0 3px #606060;
                border: 1px solid #acacac;
                -moz-border-radius: 6px;
                -webkit-border-radius: 6px;
                border-radius: 6px;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                font-family: Arial, Calibri, Tahoma, Verdana;
                font-size: 18pt;
                font-weight: 500;
                color: #000099;
                cursor: pointer;
                outline: none;
            }

            select#selectPointOfInterest option {
                padding: 4px 10px 4px 10px;
                font-size: 11pt;
                font-weight: normal;
            }

            select#selectPointOfInterest option[selected] {
                font-weight: bold
            }

            select#selectPointOfInterest option:nth-child(even) {
                background-color: #f5f5f5;
            }

            select#selectPointOfInterest:hover {
                font-weight: 700;
            }

            select#selectPointOfInterest:focus {
                box-shadow: inset 0 0 5px #000099;
                font-weight: 600;
            }
            /*LABEL FOR SELECT*/

            label#lblSelect {
                position: relative;
                display: inline-block;
            }
            /*DOWNWARD ARROW (25bc)*/

            label#lblSelect::after {
                content: "\25bc";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                width: 20pt;
                line-height: 40pt;
                vertical-align: middle;
                text-align: center;
                background: #000099;
                color: #fefefe;
                -moz-border-radius: 0 6px 6px 0;
                -webkit-border-radius: 0 6px 6px 0;
                border-radius: 0 6px 6px 0;
                pointer-events: none;
            }
        </style>
    </head>

    <body>
        <br />
        <select id="selectTravelCity" title="Select Travel Destination">
            <option>New York City</option>
            <option>Washington DC</option>
            <option>Los Angeles</option>
            <option>Chicago</option>
            <option>Houston</option>
            <option>Philadelphia</option>
            <option>Phoenix</option>
            <option>San Antonio</option>
            <option>San Diego</option>
            <option>Dallas</option>
            <option>San Jose</option>
            <option>Austin</option>
        </select>
        <br />
        <br />

        <label id="lblSelect">
            <select id="selectPointOfInterest" title="Select points of interest nearby">
                <option>caffe</option>
                <option>food beverage</option>
                <option>restaurant</option>
                <option>shopping</option>
                <option>taxi limo</option>
                <option>theatre</option>
                <option>museum</option>
                <option>computers</option>
            </select>
        </label>
    </body>

</html>

结果如下：

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016/03/14 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css

select标签 style设置

select标签 style设置

select标签 style设置

通过CSS来改变

demo附上：

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐