[英]Border doesn't display in CSS, why?
I tried to add a border to the input but the border doesn't display.我试图为输入添加边框,但边框不显示。 I don't know what the problem could be.
我不知道可能是什么问题。 Does anyone see something that I don't?
有没有人看到我没有看到的东西?
HTML: HTML:
<div class="word">
<div class="search">
<span class="text">Search</span>
<input type="text" placeholder="Enter word to search">
<button><i class="fas fa-search"></i></button>
</div>
</div>
And CSS:和 CSS:
.word .search input{
position: absolute;
height: 42px;
width: calc(100% - 50px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6 !important;
outline: none;
border-radius: 5px 0 0 5px;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
just remove the opacity or make it 1只需删除不透明度或将其设置为 1
<div class="word">
<div class="search">
<span class="text">Search</span>
<input type="text" placeholder="Enter word to search">
<button><i class="fas fa-search"></i></button>
</div>
</div>
<style>
.word .search input{
position: absolute;
height: 42px;
width: calc(100% - 50px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6 !important;
outline: none;
border-radius: 5px 0 0 5px;
/*opacity: 0;*/
pointer-events: none;
transition: all 0.2s ease;
}
</style>
I am not sure I understand precisely what you are trying to do but as stated in previous answers if you set the opacity to 0 the entire input including the border will be transparent/not visible.我不确定我是否准确理解您正在尝试做什么,但如之前的答案所述,如果您将不透明度设置为 0,则包括边框在内的整个输入将是透明的/不可见的。 The search bar doesn't seem to do much in the code you provided as the
pointer-events: none;
搜索栏在您作为
pointer-events: none;
results in the search bar being impossible to select.导致搜索栏无法搜索到 select。
So if you want a search bar with a border but with a transparent background, and it being clickable I would suggest the following:因此,如果您想要一个带边框但背景透明且可点击的搜索栏,我建议如下:
.word{ background: lightgrey; }.search input{ border: 2px solid #000; border-radius: 5px 0 0 5px; background: transparent; }
<div class="word"> <div class="search"> <span class="text">Search</span> <input type="text" placeholder="Enter word to search"> <button><i class="fas fa-search"></i>button</button> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.