找回密码
当前位置：前端开发者 > CSS > 正文

iphone前端开发CSS3 重置浏览器input等默认样式

2018-07-29 分类：CSS 阅读(782) 评论(0)
app mui前端开发代码|web前端开发和h5|前端app手机端开发
iphone前端开发CSS3 重置浏览器按钮input,select等默认样式
之前写了一个登录表单页面，再iphone上测试遇到了一些奇怪的问题：（分别iPhone和Android的手机上测试作对比）
1、表单中的input[type=”submit”]按钮在iPhone的safari浏览器下会出现圆角的情况；
2、input[type=”text”]文本输入框会有内阴影；
3、而且在iPhone中 ，所有的input会有圆角；
4、点击输入的时候，会有灰色背景；
之前没遇到过这种情况，于是找了些解决办法，按其方法在样式中加入：-webkit-appearance:none；就ok了~哈哈！！
还有加入 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 就可以去除了点击输入框时出现灰色背景的样式；
.form-change input,.form-change select{
-webkit-appearance:none; /去除系统默认的样式/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); / 点击高亮的颜色/
}
以后在开发移动端web的时候，建议大家可以直接在“reset.css”样式文件中加入：input[type=”submit”],
input[type=”reset”],
input[type=”button”],
select,
button {
-webkit-appearance: none;
}
详细代码可以看这里（要在iphone上测试才可以看出问题的哦）：代码片段 1
<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width,minimum-scale=1.0,maximum-scale=1.0″ />
    <title>CSS3 重置Iphone浏览器按钮input,select等表单元素的默认样式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-family: ‘BebasNeueRegular’, ‘Arial Narrow’, Arial, sans-serif;
            font-size: 16px;
        }
        .wrap {
            max-width: 500px;
            margin: 0 auto;
        }
        /**/
        .form-actions {
            width: 90%;
            margin: 0 auto;
        }
        .form-actions input[type=”text”] {
            width: 96%;
            padding: 8px 2%;
            color: #fff;
            margin: 8px 0;
            border: 1px solid #d1d1d1;
        }
        .form-actions select {
            width: 100%;
            color: #666;
            height: 30px;
            margin: 10px 0;
            border: 1px solid #d1d1d1;
        }
        .form-actions input[type=”submit”] {
            width: 40%;
            display: block;
            margin: 0 auto;
            cursor: pointer;
            background: #a9d154;
            padding: 8px 5px;
            color: #fff;
            font-size: 24px;
            border: 1px solid #7d9a1a;
            margin-bottom: 10px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
            border-radius: 3px;
            box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset;
            -webkit-transition: all 0.2s linear;
            transition: all 0.2s linear;
        }
        .tips {
            width: 80%;
            padding: 5%;
            color: #7d9a1a;
            margin: 20px auto 5px;
            background: #F9FFE4;
            border: 1px dotted #7d9a1a;
        }
        /*修改后的样式*/
        .form-change input,
        .form-change select {
            -webkit-appearance: none;
            /*去除系统默认的样式*/
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            /* 点击高亮的颜色*/
        }
        .form-change {
            width: 90%;
            margin: 0 auto;
        }
        .form-change input[type=”text”] {
            width: 96%;
            padding: 8px 2%;
            color: #fff;
            margin: 8px 0;
            border: 1px solid #d1d1d1;
        }
        .form-change select {
            width: 100%;
            color: #666;
            height: 30px;
            margin: 10px 0;
            border: 1px solid #d1d1d1;
        }
        .form-change input[type=”submit”] {
            width: 40%;
            display: block;
            margin: 0 auto;
            cursor: pointer;
            background: #a9d154;
            padding: 8px 5px;
            color: #fff;
            font-size: 24px;
            border: 1px solid #7d9a1a;
            margin-bottom: 10px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
            border-radius: 3px;
            box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset;
            -webkit-transition: all 0.2s linear;
            transition: all 0.2s linear;
        }
    </style>
</head>
<body>
    <div class=”wrap”>
        <div class=”form-actions”>
            <input type=”text” value=”” placeholder=”邮箱/手机” class=”txt1″>
            <input type=”text” value=”” placeholder=”密码” class=”txt1″>
            <select name=”” id=””>
                <option value=””>请选择</option>
                <option value=””>广州</option>
                <option value=””>深圳</option>
                <option value=””>东莞</option>
            </select>
            <input type=”submit” value=”提交”>
        </div>
        <div class=”tips”>添加了：”-webkit-appearance:none; “之后的样式如下：</div>
        <div class=”form-change”>
            <input type=”text” value=”” placeholder=”邮箱/手机” class=”txt1″>
            <input type=”text” value=”” placeholder=”密码” class=”txt1″>
            <select name=”” id=””>
                <option value=””>请选择</option>
                <option value=””>广州</option>
                <option value=””>深圳</option>
                <option value=””>东莞</option>
            </select>
            <input type=”submit” value=”提交”>
        </div>
    </div>
</body>
</html>
es6前端开发书籍|数据结构与算法对前端开发重要吗 为什么|前端开发岗位理解
赞(0)
前端开发者 » iphone前端开发CSS3 重置浏览器input等默认样式
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论