select样式清除

Posted 韦书文

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了select样式清除相关的知识，希望对你有一定的参考价值。

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

火狐和谷歌

select { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: transparent;} 

清除option的样式同select，可参考。

禁止点击为 <select disabled="disabled"></select>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select和input清除默认样式</title>
    <style>
        .Car_task tr td select,.Car_task tr td input { width: 100%; height: 104%; border: 1px solid #e2e2e2; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: transparent; text-align: center; text-align: -webkit-center; text-align: -moz-center; text-align-last: center; }
    </style>
</head>
<body>
    <div class="Car_task">
    <div class="Log_details">日志详情</div>
        <table width="100%">
            <thead>
            <tr><th width="30%">名称</th><th width="10%">类型</th><th width="20%">ip地址</th><th width="10%">端口号</th><th width=‘25%‘></th></tr></thead>
            <tbody>
                <tr>
                  <td width="30%"><input type="text" value="ceshi1" disabled="disabled"></td>
                  <td width="10%">
                    <select disabled="disabled">
                      <option>1</option>
                      <option>2</option>
                    </select>
                  </td>
                  <td width="20%"><input type="text" value="192.168.0.222"></td>
                  <td width="10%"><input type="text" value="8080" disabled="disabled"></td>
                  <td width="25%"><button>修改</button>  <button>删除</button></td>
                </tr>
            </tbody>
        </table>      
    </div>
</div>
</body>
</html>

 

以上是关于select样式清除的主要内容，如果未能解决你的问题，请参考以下文章

css清除select的下拉箭头样式

清除Css中select的下拉箭头样式

表单单选多选项清除默认样式小技巧

用纯css改变下拉列表select框的默认样式

清除select自带小三角

select样式的重写