CSS 如何使引导输入字段“透明”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21926825/
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 make a bootstrap input field "transparent"
提问by haki
I'm trying to remove the border from a bootstrap input form-control.
After setting border-color:whitei'm getting this
我正在尝试从 bootstrap input 中删除边框form-control。设置后border-color:white我得到这个
How can i lose this top border ? I thought it might be a shadow property but ... nothing.
我怎么能失去这个顶部边框？我认为这可能是一个影子属性，但......没有。
This is the markup
这是标记
<div class="form-group">
<input class="form-control transparent-input" type='text' name='name' placeholder="Field title..." required>
</div>
bootstrap v3.1.1
引导程序 v3.1.1
EDIT :
编辑 ：
None of the solution below is working. see this Fiddle
以下解决方案均无效。看到这个小提琴
回答by Pranav C Balan
Set background color using rgba()also add border:none;to remove the border
使用rgba()还添加border:none;删除边框设置背景颜色
<style>
input.transparent-input{
background-color:rgba(0,0,0,0) !important;
border:none !important;
}
</style>
The last value 0will make the background transparent
最后一个值0将使背景透明
or simply set background color as transparent.
或简单地将背景颜色设置为transparent.
<style>
input.transparent-input{
background-color:transparent !important;
border:none !important;
}
</style>
add !importantto override the existing style
添加!important以覆盖现有样式
回答by A.M.N.Bandara
.transparent-input { background: tranparent; }
回答by newTag
Change the background-color.
更改背景颜色。
.transparent-input {
background-color: rgba(0, 0, 0, 0);
border:none;
}
You can change the background color to (0,0,0) and its opacity to '0'.
Also use border:none. And try using !importantto override the existing style if the above doesn't work.
您可以将背景颜色更改为 (0,0,0)，并将其不透明度更改为“0”。还有use border:none。!important如果上述方法不起作用，请尝试使用覆盖现有样式。
回答by Boniface Dennis
with bootstrap class you can make it transparent ...just apply this class to your code .bg-transparent
使用 bootstrap 类，您可以使其透明……只需将此类应用于您的代码即可。bg-transparent
回答by user2878850
Try setting box shadow to none. See https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
尝试将框阴影设置为无。见https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
