参见英文答案 > Input with border for half height 5个
我有一个输入字段,底部只有一个边框,现在我需要在输入的左侧和右侧创建一个小线.这有点难以描述,所以我将使用一个例子：
input { background-color: transparent; height: 20px; padding: 10px 10px 1px; border: 0; border-bottom: 1px solID red;}Fiddle
这就是我所拥有的：
这就是我需要的样子：
input { height:20px; padding:0 5px; border: 0; Box-shadow: -9px 9px 0px -7px red,9px 9px 0px -7px red; wIDth:300px;}需要根据输入的高度调整sBox-shadow的spread radius and the X/Y offset,如本例中可以看到的输入更高：
input { height:20px; padding:10px 5px; border: 0; Box-shadow: -18px 18px 0px -17px red,18px 18px 0px -17px red; wIDth:300px;}浏览器支持box-shadows is IE9+. 总结
以上是内存溢出为你收集整理的html – 碗状下划线或输入边框全部内容，希望文章能够帮你解决html – 碗状下划线或输入边框所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）