CSS不显示边框，为什么？

Question

我试图为输入添加边框，但边框不显示。 我不知道可能是什么问题。 有没有人看到我没有看到的东西？

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>

和 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;
}

Answer 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>

Answer 2

我不确定我是否准确理解您正在尝试做什么，但如之前的答案所述，如果您将不透明度设置为 0，则包括边框在内的整个输入将是透明的/不可见的。 搜索栏在您作为pointer-events: none; 导致搜索栏无法搜索到 select。

因此，如果您想要一个带边框但背景透明且可点击的搜索栏，我建议如下：

 .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>