去除select下拉框的边框和三角下标

去除select下拉框的边框和三角下标

效果图

去除select下拉框的边框和三角下标_第1张图片

核心css代码

        /*去除select边框*/
        border: 0;
        background: transparent; 
        /*去除下拉框的三角下标*/
        appearance:none;
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari 和 Chrome */

完成效果图的所有代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试title>
head>
<body>
    <div style="width: 100%;text-align: center;">
        修改前:
        <select>
            <option>吴彦祖option>
            <option>梁朝伟option>
            <option>郭富城option>
        select>
        <br><br><br><br>
        修改后:
        <select class="trimSelect">
            <option>吴彦祖option>
            <option>梁朝伟option>
            <option>郭富城option>
        select>
    div>
body>
<style>
    .trimSelect {
        /*去除select边框*/
        border: 0;
        background: transparent;
        /*去除下拉框的三角下标*/
        appearance:none;
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari 和 Chrome */
    }
style>
html>

你可能感兴趣的:(前端,html,css3,css,html5)