[英]Textarea border color not changing completely
我试图将边框设置为灰色,并且出于某些原因, <input type="text">
的框只有2个“边缘” /一半是灰色,而<textarea>
边框很好。
知道为什么会这样吗? 两者具有相同的类.fill-form-style
.fill-form-font {
padding: 8px;
border-radius: 20px;
border-color: gray;
outline: none;
font-size: 16px;
}
这是输入和文本区域的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>
使用border-style:solid;
这将阻止边框成为两种不同的颜色。
由于一些乱搞(和Paulie_D在评论[感谢!]),我发现这是因为inset
边框样式。
您还可以使用速记border
,这意味着CSS中的行数更少。
border:1px solid #f00;
这是一个工作片段:
.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>
那是因为User Agent Style
。 您需要使用border
覆盖用户代理程序的边界。 例:
.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>
解...
.fill-form-font{
padding: 8px;
border-radius: 20px;
border: 1px solid gray;
outline: none;
font-size: 16px;
}
默认情况下,浏览器用户为border-style: inset;
您应该将其更改为使用border-style: solid
。 您可以只添加该属性,也可以仅在一行中使用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.