input继承css属性，font:inherit，导致输入框大小不对

最新推荐文章于 2023-05-05 10:06:15 发布
最新推荐文章于 2023-05-05 10:06:15 发布
阅读量725 收藏 1
点赞数
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54495706/article/details/128863364
版权

别人项目拿来问我说，输入框的大小变了，不知道怎么回事，打开dom查看元素，发现一个font:inherit，去掉后就正常了，肯定是继承了父元素的字体属性，给input添加上字体样式即可；

我当时是因为line-height继承了，重新给input加上一个line-height属性就恢复正常了

案例：

明明没有给input加样式，但是他有一个font:inherit属性，他就变了

 去掉font:inherit 他就好了

 当然项目里不知道他是弄啥了，导致input继承了父元素的字体属性

S_Mosar
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html input font size,在移动端中Input大小随着font-size而变化
weixin_39747807的博客
06-27 771
项目里准备做一个模仿支付宝6位密码输入框，做完在谷歌浏览器上模拟，没有任何问题，附图如下：因为密码输入框小黑点太小了，所以我把font-size调到了50px，在电脑网页上也是一切运行正常，但是当我在手机上打开时，发现输入框异常的大，附图如下：发现原因出自"font-size"，如果我把"font-size"修改为0，手机上效果就和电脑一样了，但是这样就看到输入的内容了，请问如何解决这个问题，保证...
深入理解CSS的height:100%和height:inherit之间的使用区别
01-19
inherit确实是个好东西，不仅节约代码，尤其与background之流打交道；而且还利于维护。 注意，如果想要继承background的图片，不能这样缩写，会显得很天真： CSS Code复制内容到剪贴板 background: #fff inherit...
CSS 继承 inherit属性的方法
11-20
给定一张有如下背景图的 div： 制作如下的倒影效果： 方法很多，但是我们当然要寻找最快最便捷的方法，至少得是无论图片怎么变化， div 大小怎么变化，我们都不用去改我们的代码。 法一：-webkit-box-reflect 这是一个十分新的 CSS 属性，使用起来十分简单，可以从各个方向反射我们内容。不过兼容性过于惨淡： 基本上是只有 -webkit- 内核的浏览器才支持。 不过使用起来真的是方便，解题如下： 不过使用起来真的是方便，解题如下： div{ -webkit-box-reflect: below; } box-reflect 有四个方向可以选， below
font:inherit
weixin_30478923的博客
09-17 2018
font:inherit 字体的设置 设置所有元素的字体保持一致： 所有元素：*{font:inherit;} /* IE8+ */ body体用percent：body{font:100%/1 sans-serif;} 其余用em：div{font-size:1.2em;} 参考：css-font-size-em-vs-px-vs-pt-vscss inherit 转载于:ht...
select和input不会继承字号body font-size
weixin_34194087的博客
09-15 163
<!DOCTYPE html><html lang="zh-Hans-CN"><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>test</title&g
font-family:inherit;？CSS小归纳ing
Rebecca
09-21 1461
1.font-family:inherit;是什么意思？     字体样式从  父元素继承。   2.     zoom:1; /* 针对IE6.0*/      还有，例如<div style="background:#000; margin:5px; zoom:1;"> /* 在没设置宽度确切值的时候用ZOOM*/     overflow:hidde...
css3字体闪烁炫酷,css3 scale动画 字体、输入框等会闪烁，怎么解决？
weixin_36321633的博客
08-04 265
画图@-moz-keyframes loginAnimation {from {opacity: 0;-moz-transform: scale(2);}to {opacity: 1;-moz-transform: scale(1);}}@-ms-keyframes loginAnimation {from {opacity: 0;-ms-transform: scale(2);}to {opac...
CSS中的inherit使用技巧小结
09-25
在CSS中，`inherit`关键字是一个非常重要的概念，它允许子元素从其父元素继承特定的样式属性。本文将深入探讨`inherit`的使用技巧及其在CSS中的作用。 首先，`inherit`关键字的作用是使子元素沿DOM树向上查找，采用...
css字体样式(Font Style) 属性
12-13
css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant font-weight font-size font-family} 2 字体类型 {font-family:"字体1","字体2","字体3",…} 3 字体大小 {font-size:...
CSS 中 font-family inherit
m0_58780961的博客
11-29 2834
CSS 中FONT-FAMILY: inherit FONT-FAMILY: inherit;什意思 font-family:inherit; 继承父元素的字体系列样式，如黑体，宋体等。 注意： 1、所有主流浏览器都支持 font-family 属性。 2、任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit" vertical的默认属性baseline * baseline是什么？ * 这是维基百科上的一张图,简单地来说，
input的样式设置
热门推荐
csdn_v_for_vendetta的博客
11-17 2万+
<input> 输入框：type=text 去掉输入框的默认的样式： -web-kit-appearance:none; -moz-appearance: none; <input type="text" class="form_input" placeholder="请输入姓名"/> placeholder：隐式的显示文字，当输入内容后将消失。 <st...
html如何样式继承写法,CSS 平级和儿子级样式写法示例
weixin_35809747的博客
06-04 253
input:checked+ol:这个是讲当inoput 拥有了checked后它平级的OL拥有的样式。input:checked+ol>li:中的大于是指当inoput 拥有了checked后它平级的OL下面儿子辈的li的样式，孙子辈的不继承。Html代码复制代码代码如下:用户界面(UI)元素状态伪类选择符 E:checked_CSS参考手册_web前端开发参考手册系列input[type...
css覆盖规则_CSS中的两个特殊值，用于控制层叠的inherit和initial
weixin_39637386的博客
11-29 370
在CSS中有两个特殊值可以赋给任意属性，用于控制层叠：inherit和initial。我们来看看这两个特殊值。使用inherit关键字有时，我们想用继承代替一个层叠值。这时候可以用 inherit 关键字。可以用它来覆盖另一个值，这样该元素就会继承其父元素的值。假设我们要给网页加上一个浅灰色的页脚。在页脚上有一些链接，但我们不希望这些链接太显眼，因为页脚不是网页的重点。因此要将页脚的链接变成深灰色...
CSS3之font属性
杨筱斌的博客
10-24 1116
font： 作用：           在一个声明中设置所有字体属性 说明：           可设置的属性是（按顺序）： “font-style font-weight font-size/lin...
现代CSS样式重置最佳实践！
maxue20161025的博客
11-28 1184
如果您正在尝试迁移一个大型的预先存在的项目以使用 border-box，这可能是一个有用的策略。这是行不通的，因为在流式布局（CSS 中的主要布局模式）中，高度和宽度的操作原理完全不同。元素的宽度是根据其父元素计算的，而元素的高度是根据其子元素计算的。在上面的例子中，粉色框宽度为 200 px，内部内容框的宽度将缩小到 156 px（200 px - 40 px - 4 px）。如果图像的原始尺寸为 800×600，即使将其放入宽度为 500px 的父元素中，其宽度也将是 800px。
css之font各种属性
fengzheng的博客
02-26 2182
网页默认字体样式在不同的浏览器里表现的往往不一致，浏览器最终呈现出的样式受三层控制： 浏览器默认样式；网页定义样式； 用户自定义样式；优先级为3 > 2 > 1，即用户自定义样式可以覆盖网页定义样式，而网页定义样式可以覆盖浏览器默认样式。css中的字体属性：font-family：规定元素的字体样式，可以设置多个字体名称，名称之间用逗号分隔（如名称之间有空格，需将名称包含在引号之内），...
CSS字体样式属性
yunnuo的博客
09-29 566
CSS 属性： 字体样式(Font Style) 1 字体样式 {font:font-style font-variant font-weight font-size font-family} 2 字体类型 {font-family:“字体1”,“字体2”,“字体3”,…} 3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| ...
css重置样式
weixin_57774738的博客
05-31 121
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, l
解决el-input输入框(text)与文本域(textarea)字体不一样问题
多看书少吃饭的博客
05-05 2044
解决el-input输入框(text)与文本域(textarea)字体不一样问题
button, select { text-transform: none; } button, input { overflow: visible; } button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button { border-radius: 0; }
最新发布
07-15
` 设置字体大小为继承，使按钮和输入框使用父级元素的字体大小。 6. `line-height: inherit;` 设置行高为继承，使按钮和输入框使用父级元素的行高。 7. `border-radius: 0;` 设置按钮的边框半径为0，取消圆角效果。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值