去掉select 默认样式（ios）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .sel {
                position: relative;
                width: 100px;
            }
            select {
                -webkit-appearance: none;
                /*兼容苹果手机*/
                border: 1px solid #EBEBEB;
                width: 100px;
                height: 25px;
                line-height: 25px;
                /*防止紧紧靠在边上*/
                text-indent: 2px;
                background-color: transparent;
            }
            .jt {
                display: inline-block;
                position: absolute;
                right: 2%;
                top: 10px;
                height: 20px;
                width: 15px;
                background-image: url(jiant.png);
                background-size: 150%;
                background-position: center -10px;
                z-index: -1000;
            }
        </style>
    </head>
    <body>
        <div class="sel">
            <select>
                <option>选择时间段</option>
                <option>07:30-08:30</option>
                <option>08:30-09:30</option>
                <option>09:30-10:30</option>
                <option>10:30-11:30</option>
                <option>11:30-12:30</option>
                <option>13:30-14:30</option>
                <option>14:30-15:30</option>
                <option>15:30-16:30</option>
                <option>16:30-17:31</option>
            </select>
            <span class="jt"></span>
        </div>
    </body>
</html>

原文地址：https://www.cnblogs.com/fanting/p/9876733.html

时间： 2024-08-28 01:24:14

去掉select 默认样式（ios）的相关文章

修改select 默认样式

删除select默认样式图标 appearance:none;-moz-appearance:none;-webkit-appearance:none; 修改样式图标 background: url('../image/getCustomer/arrow_select.png') no-repeat scroll right center #e9f5fe; 原文地址:https://www.cnblogs.com/gosimple/p/8376388.html

ie下select默认样式修改

chrome下浏览: IE和FF下浏览: 使用select做下拉菜单,使用appearance:none;可以消除默认样式,但是要每个浏览器兼容到 .contactus2_con select{ -webkit-appearance: none; -moz-appearance: none; appearance:none; background:none; background:url("../images/select.jpg") right center no-repeat; w

修改select默认样式，兼容IE9

前面有篇文章已经提供了如何修改select标签的默认样式,但是只能兼容到ie10,要兼容ie9只能模拟一个类似的 html结构: <div class="select_diy"> <select> <option value="产品咨询1">产品咨询1</option> <option value="产品咨询2">产品咨询2</option> <option value

纯css改变select默认样式

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> select.sty1 { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式

css取消input、select默认样式（手机端）

IOS端: border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏览器(包括微信)内置浏览器下还会有箭头以及高亮的线框,要除去这个可以使用 1 -webkit-appearance: none; 取消webkit默认的样式. 我们将input.select框设为透明的目的就是为了方便使用设计师制作的样式(即使差1.2个px没对齐也不会察觉) 注意:select的下拉框的样式跟具各个浏览器的不同都不会不同.这里就不研究了!

去除select默认样式

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-

【css】如何修改select的样式

select { /*清除select默认样式*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; -ms-appearance:none; border:1px solid #CCC; width:330px; height:44px; /*自定义箭头的样式,记得背景一定要加白色或其他*/ background:url("../img/select.png") no-repeat scroll righ

去掉或者修改 input、select 等表单的【默认样式】

隐藏input等表单的默认样式的背景: textarea,select,input{-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;} 让div看起来像按钮: div{appearance:button;-moz-appearance:button; /* Firefox */-webkit-appearance:button; /* Safari 和 Chrome */

用纯css改变下拉列表select框的默认样式（不兼容IE10以下）

在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计. 一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没办法做!你应该不会抱怨设计师,其实更改下拉输入的默认样式并不是非常难的! 下面是解决方案. 我们看到默认的下载选择框在firefox和chrome中是有些不同的 Chrome 和 Firefox 中分