css 清空ios端_css去除iPhone、iPad等IOS系统默认按钮样式

「爱情、让人受尽委屈。」 2022-12-31 14:22 107阅读 0赞

最近在做手机网站的时候，安卓手机看起来都正常，但是在IOS系统下按钮都被系统自带的样式给取代了，下面青岛星网跟大家分享：css去除iPhone、iPad等IOS系统默认按钮样式 .

css去除iPhone、iPad等IOS系统默认样式代码input\[type="button"\], input\[type="submit"\], input\[type="reset"\] \{

\-webkit-appearance: none;

\}

textarea \{ -webkit-appearance: none;\}

如果还有圆角的问题，

.button\{ border-radius: 0; \}

去除Chrome等浏览器文本框默认发光边框input:focus, textarea:focus \{

outline: none;

\}

去掉高光样式input:focus\{

\-webkit-tap-highlight-color:rgba(0,0,0,0);

\-webkit-user-modify:read-write-plaintext-only;

\}

当然这样以来，当文本框载入焦点时，所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了，但我们可以重新根据自己的需要设置一下，如：input:focus,textarea:focus \{

outline: none;

border: 1px solid \#f60;

\}

当文本框载入焦点时，边框颜色就会变色，给用户一个反馈。

去除IE10+浏览器文本框后面的小叉叉input::-ms-clear \{

display: none;

\}

禁止多行文本框textarea拖拽textarea \{

resize: none;

\}

在这里要提到一个属性resize，这个是CSS3属性，用于元素缩放，它可以取以下几个值：

none 默认值

both 允许水平方向及垂直方向缩放

horizontal 只允许水平方向缩放

vertical 只允许垂直方向缩放不仅可以针对textarea元素，对大多数元素都适用，如div等，在这里不一一列举，但与textarea不同的是，对div使用时需要加上一句overflow:auto;，也就是这样才有效果：div \{

resize: both;

overflow: auto;

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，107人围观）

还没有评论，来说两句吧...

相关阅读

相关清除css默认样式

{ margin:0; padding:0 } li{ list-style:none }

Myth丶恋晨/ 2023年10月09日 14:15/ 0 赞/ 26 阅读

相关 IOS中 button按钮去除边框

IOS中 button按钮去除边框 <view class="view_2"> <button class="btn edit" type="button"

迈不过友情╰/ 2023年02月26日 10:25/ 0 赞/ 57 阅读

相关 CSS_a标签去除默认样式

/包含以下四种的链接/ a { text-decoration: none; } /正常的未被访问过的链接/

た入场券/ 2023年01月22日 10:57/ 0 赞/ 20 阅读

相关 CSS - 去除 input 框默认样式

前言大部分情况下，我们都会自定义 `input` 框样式，而默认的边框及样式非常简陋。 ![在这里插入图片描述][20210511151559657.png]

爱被打了一巴掌/ 2023年01月20日 05:55/ 0 赞/ 30 阅读

相关 CSS清除默认样式

html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, tex

古城微笑少年丶/ 2023年01月02日 15:23/ 0 赞/ 239 阅读

相关 css 清空ios端_css去除iPhone、iPad等IOS系统默认按钮样式

最近在做手机网站的时候，安卓手机看起来都正常，但是在IOS系统下按钮都被系统自带的样式给取代了，下面青岛星网跟大家分享：css去除iPhone、iPad等IOS系统默认按钮样式

「爱情、让人受尽委屈。」/ 2022年12月31日 14:22/ 0 赞/ 108 阅读

相关 CSS_css去掉input标签的默认样式，去除input点击样式

去掉input标签的默认样式，去除input点击样式 outline: none; input { background: none;

小咪咪/ 2022年11月11日 05:17/ 0 赞/ 276 阅读

相关 CSS去掉iPhone、iPad的默认按钮样式

input\[type="button"\], input\[type="submit"\], input\[type="reset"\] \{ \-webkit-

待我称王封你为后i/ 2022年07月12日 04:16/ 0 赞/ 237 阅读

相关 CSS按钮样式

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <t

朴灿烈づ我的快乐病毒、/ 2022年02月05日 12:59/ 0 赞/ 418 阅读

相关 css小技巧,菜单栏按钮hover样式与按钮默认样式冲突

![在这里插入图片描述][20191028113226132.png] 蓝色背景是默认样式，灰色背景是`hover`样式。初写菜单栏时，代码夸夸夸一顿敲。发现把鼠标移到蓝

野性酷女/ 2021年07月04日 18:48/ 1 赞/ 872 阅读