CSS 美化 Select

最新推荐文章于 2024-05-24 13:19:01 发布

shadowsky

最新推荐文章于 2024-05-24 13:19:01 发布

阅读量883

点赞数

分类专栏： CSS JavaScript jQuery

本文链接：https://blog.csdn.net/shadowsky/article/details/78221460

版权

CSS JavaScript jQuery 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Default</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
    <link href="Style/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="Style/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
        /* Reset Select */
        select {
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            appearance: none;
            outline: 0;
            border: 0px;
            height: 25px;
            margin: 0px;
            padding: 0px 0px 0px 3px;
            cursor: pointer;
        }


        select::-ms-expand {
            display: none;
        }


        /* Select */
        .select {
            position: relative;
            display: block;
            overflow: hidden;
            border: 1px solid #ccc;
        }
        .select:hover {
            border-color: #66afe9;
            outline: 0;
            box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 3px rgba(102,175,233,0.2);
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 3px rgba(102,175,233,0.2);
        }


        /* Arrow */
        .select::after {
            font: normal normal normal 14px/1 FontAwesome;
            content: "\f0d7";
            position: absolute;
            text-align: right;
            top: 0;
            right: 0;
            bottom: 0;
            padding: 5px 8px 0px 0px;
            pointer-events: none;
            background: #fff;
            width: 15px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $('select').each(function () {
                var select = $(this);
                var selectDiv = select.parent();
                var selectWidth = select.width();
                selectDiv.width(selectWidth + 25);
                select.width("100%");
            });
        })
    </script>
</head>
<body>
    <br /><br /><br /><br /><br /><br /><br /><br />
    <div style="padding:0 0 0 20px">
        <div class="select">
            <select id="select1">
                <option>option1</option>
                <option>option2</option>
                <option>option3</option>
            </select>
        </div>
        <br /><br />
        <div class="select">
            <select id="select2">
                <option>this is option1</option>
                <option>this is option2</option>
                <option>this is option3</option>
            </select>
        </div>
    </div>
    <br /><br /><br /><br /><br /><br />
</body>
</html>