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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:49:20  来源:igfitidea点击:

How to remove borders around textbox when adding background imageI have

htmlcss

提问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:noneinstead 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.

干杯。