Html 添加背景图像时如何删除文本框周围的边框我有
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16791078/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove borders around textbox when adding background imageI have
提问by GIVENALITY
I have a textbox of which by I removed the default borders using outline:none;
However, when I add a background-image the border is shown and can't be removed!
我有一个文本框,我使用它删除了默认边框, outline:none;
但是,当我添加背景图像时,边框会显示并且无法删除!
How do I get rid of this? Here is the box:
我该如何摆脱这个?这是盒子:
<input type = "text" placeholder = "Username" class = "txt_input">
and the css:
和CSS:
background: url('images/user-icon.png') left no-repeat;
margin-bottom: 5px;
box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
font-family: 'ProximaNova-Bold';
outline: none;
width: 200px;
height:30px;
text-align: center;
text-transform: capitalize;
padding:15px;
padding-left:21px;
回答by Axel Amthor
add a border: 0px none;
to your css? The outline handles only the focus border.
border: 0px none;
在你的css中添加一个?轮廓仅处理焦点边框。
回答by Nitin Khanna
I think border: transparent;
is better choice.
我认为 border: transparent;
是更好的选择。
回答by Preston
You have tried this border:0;
on your CSS style??
你border:0;
在你的 CSS 样式上试过这个吗??
回答by Jeroen W
Use border:none
instead of outline:none
. Also, to capitalize text, use text-transform:uppercase
. Note: you will remain with a little border, because of the box-shadow you applied. Removing this also will leave you with no border.
使用border:none
代替outline:none
。此外,要大写文本,请使用text-transform:uppercase
. 注意:由于您应用了框阴影,您将保留一个小边框。删除它也将使您没有边界。
Cheers.
干杯。