当前位置：网站首页>Cancel the down arrow of the default style of select and set the default word of select

Cancel the down arrow of the default style of select and set the default word of select

2022-07-08 00:35:00 【Super code force】

Cancel select The default style of the down arrow

The downward arrow is shown in the figure below ：

Here you can set a property like this appearance:none; It can be removed select Default style for , It looks like the following figure ：

Style code ：

// style 
<style>
        select{
            width: 100px;
            appearance:none;    // Clear default style 
        }
</style>

// structure 
<body>
    <form action="">
        <select name="" id="">
            <option value=""> Beijing </option>
            <option value=""> wuhan </option>
            <option value=""> Shanghai </option>
        </select>
    </form>
</body>

select Set default typeface

The default text is displayed only once , Do not appear in the options , The effect is as follows ：

Style code ：

<body>
    <form action="">
        <select>
            // Key lines of code 
            <option selected="selected" disabled="disabled"  style='display: none' value=''> Please choose gender </option>
            // Options 
            <option> male </option>
            <option> Woman </option>
        </select>
    </form>
</body>