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>

 

posted @ 2018-05-15 18:52  韦书文  阅读(220)  评论(0)  编辑  收藏  举报