解决移动端input自动变成圆角

最新推荐文章于 2021-12-30 15:42:29 发布
最新推荐文章于 2021-12-30 15:42:29 发布
阅读量978 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： css 前端 手机input圆角
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xshiyi110/article/details/85297171
本文介绍了一个在iOS设备上遇到的移动端项目问题：默认输入框自动变为圆角样式，即使项目中并未进行相关设置。文章提供了解决方案，通过在CSS中加入特定代码，成功使输入框恢复为预期的样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天写移动端项目，用同时手机查看，发现在iphone下面input自动变成了圆角，但是我根本没有设置

解决方式很简单 css里加上

// An highlighted block
-webkit-appearance:none !important;
border-radius: 0 !important;
微信小程序圆角苹果手机不兼容
゛Pudding
09-17 916
1、安卓手机圆角的正常操作就是直接border-radius：3rpx 2、苹果手机圆角却不显示，需要加以下样式： .box{ border-radius: 6rpx; overflow:hidden; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); } ...
CSS3---移动端苹果安卓适配
weixin_45343884的博客
09-20 1870
常见苹果适配问题： 【问题1】：iPhone页面会自动把数字当成电话号码，点击后自动跳到电话拨号界面 ♥♥♥方案：<meta name="format-detection" content="telephone=no" /> 【问题2】微信浏览器自动调整页面字体大小 ♥♥♥方案：禁止微信浏览器调整页面字体大小: body{ -webkit-text-size-adjust...
jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮
06-04
jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮jQueryMobile jqm jqm按钮隐藏 jqm按钮显示 jqm按钮事件 jQuery Mobile(jqm)input按钮的隐藏和显示 a标签的隐藏和显示 圆角按钮的css样式控制
iPhone 的input圆角问题
BigOrange的博客
11-23 755
在ios设备下，input会出现圆角问题，是浏览器自己添加的。如下图： 在网上查了很多帖子，均说用input {-webkit-appearance: none;} 的方法，但怎么试都没用。 测试机型如下： ios10.1，ios11.3，ios12.1 均没有用。 但用最基础的border-radius:0 就好了。 望大神们指点，-webkit-appearance: none; 都有用吗。...
HTML的input输入框变圆角后去掉边框的方法
叶卡捷琳堡的博客
02-14 3216
文章目录问题描述原来的代码修改后的代码 问题描述 在写网页时，要将<input type="text"/>输入框变为圆角，最外圈会出现一个框（如下图所示），不太好看，如何去掉这个框呢？ 原来的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #name{
移动端h5页面的那些坑
weixin_34337265的博客
11-02 192
踩过许多坑。特此总结一下：　 　　1、<input type='button'>背景色在ios中的兼容性，颜色发白　　　　解决办法：在全局样式中加入以下代码：　　　　input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; ...
仿支付宝移动端密码输入框的实现教程
- 考虑到移动端的用户体验，输入框可能还会集成键盘自动弹出、触摸反馈等交互功能。 4. 文件结构说明： - `index.html`：这是整个项目的主要页面文件，包含网页的基本结构，以及对JavaScript和CSS文件的引用。 -...
移动端web开发中的Flex布局实战案例
资源摘要信息: "移动端web开发flex布局案例" 知识点: 1. 移动端web开发: 移动端web开发是指针对智能手机、平板电脑等移动设备进行的网页设计和开发工作。在如今移动互联网高速发展的背景下，越来越多的用户通过...
网页跨版本兼容性保障：Chrome 41-45兼容性问题解决之道
[网页跨版本兼容性保障：Chrome 41-45兼容性问题解决之道](https://love2dev.com/img/dom-selector-performance.PNG) # 摘要 网页兼容性是确保网站在不同浏览器和设备上良好工作的关键挑战。本文着重分析了Chrome...
前端基础CSS+html篇 2w字吐血总结
chengxuyuanlee的博客
12-30 2186
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。
一个比较美观的圆角Tab选项卡切换效果
04-07
一个比较美观的圆角Tab选项卡切换效果.html一个比较美观的圆角Tab选项卡切换效果.html一个比较美观的圆角Tab选项卡切换效果.html
倾力总结40条常见的移动端Web页面问题解决方案
weixin_34109408的博客
05-30 3499
原文链接：http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651493053&idx=1&sn=8409bc267cd73229425a915f27f6a27f&scene=0#wechat_redirect 1.安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很...
移动端css总结
ianutt的博客
04-14 164
移动端样式问题总结
为input输入框添加圆角并去除阴影
weixin_33937913的博客
11-24 3989
&lt;input type="text" name="bianhao" value="" placeholder="请输入商品编号" maxlength="10" size="10" style="width:105px; margin:0px 0px 0px 12px;height:22px;border-radius:4px;border:1px solid #
为Input输入框添加圆角并去除阴影 去除获得焦点时方角样式
weixin_42591722的博客
07-04 2189
转载：http://www.bubuko.com/infodetail-2303962.html 1、为Input输入框添加圆角并去除阴影 　　1.1 border-radius不同浏览器下兼容设置： .boder-radius{ -webkit-border-radius:6px;//适配以webkit为核心的浏览器(chrome、safari等) -moz-bord...
input设置圆角边框去掉阴影
tucuochacha的博客
12-26 2859
&lt;div id="div" style=""&gt; &lt;input id="inputText" style="" /&gt; &lt;span type="button" id="btn" &gt;查询&lt;/span&gt; &lt;/div&gt; #di
input框设置圆角
大雷
05-03 3万+
&lt;style&gt;.btn{ width: 200px;                                              height: 30px;      background: #ccc;      border: 1px solid #eee;      border-radius: 15px;                            //圆...
移动端项目下input自动变成圆角？
Bright2017的博客
08-10 2693
移动端项目下input自动变成圆角？
html 中 input 变成圆角
热门推荐
shenyingkui的专栏
10-11 3万+
移动端 input file 取消上传
最新发布
08-31
移动端的 input file 通常用于上传文件，当用户选择了一个文件后，可以通过取消上传来取消选择的文件。 在移动端，当用户选择了一个文件后，input file 会弹出一个选择文件的框，并显示选择的文件名称。此时，用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值