[英]Textarea border color not changing completely
I'm trying to make the border gray, and for some reason only 2 "edges" / half of the box of the <input type="text">
are gray while the <textarea>
border is fine. 我试图将边框设置为灰色,并且出于某些原因, <input type="text">
的框只有2个“边缘” /一半是灰色,而<textarea>
边框很好。
Any idea why is this happening? 知道为什么会这样吗? both have the same class .fill-form-style
两者具有相同的类.fill-form-style
.fill-form-font {
padding: 8px;
border-radius: 20px;
border-color: gray;
outline: none;
font-size: 16px;
}
And this is the HTML of the input and textarea: 这是输入和文本区域的HTML:
<input type="text" name="nickname" maxlength="22" size="25" class="fill-form-font">
<textarea name="content" cols="65" rows="10" style="resize: none;" class="fill-form-font"> Text Here </textarea>
Use border-style:solid;
使用border-style:solid;
This will stop the border from being the two different colours. 这将阻止边框成为两种不同的颜色。
Thanks to some messing around (and Paulie_D in comments [Thanks!]) I found out it's because of the inset
border style. 由于一些乱搞(和Paulie_D在评论[感谢!]),我发现这是因为inset
边框样式。
You can also use shorthand border
which then means you have less lines in your css. 您还可以使用速记border
,这意味着CSS中的行数更少。
border:1px solid #f00;
Here's a working snippet: 这是一个工作片段:
.fill-form-font{ padding: 8px; border-radius: 20px; border-color: red; border-style:solid; outline: none; font-size: 16px; }
<input type="text" name="nickname" maxlength="22" size="25" class="fill-form-font" > <textarea name="content" cols="65" rows="10" style="resize: none;" class="fill-form-font"> Text Here </textarea>
That's because of User Agent Style
. 那是因为User Agent Style
。 You need to use border
to override the user agent border. 您需要使用border
覆盖用户代理程序的边界。 Example: 例:
.fill-form-font { padding: 8px; border-radius: 20px; border: 1px solid gray; outline: none; font-size: 16px; }
<input type="text" name="nickname" maxlength="22" size="25" class="fill-form-font"> <textarea name="content" cols="60" rows="10" style="resize: none;" class="fill-form-font"> Text Here </textarea>
Solution... 解...
.fill-form-font{
padding: 8px;
border-radius: 20px;
border: 1px solid gray;
outline: none;
font-size: 16px;
}
https://jsfiddle.net/ew2orox0/ live example https://jsfiddle.net/ew2orox0/实时示例
By default, browser users border-style: inset;
默认情况下,浏览器用户为border-style: inset;
and you should change it to use border-style: solid
. 您应该将其更改为使用border-style: solid
。 You could just add that property or use the border
definition in just one line: border: 1px solid gray; /* I set 1px but chrome, by default, sets 2px */
您可以只添加该属性,也可以仅在一行中使用border
定义: border: 1px solid gray; /* I set 1px but chrome, by default, sets 2px */
border: 1px solid gray; /* I set 1px but chrome, by default, sets 2px */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.