CODEWITHSUNDEEP
htmlcssinputborder
user19154568
user19154568

Reputation:

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:

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

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

Upvotes: 0

Views: 58

Answers (2)

klovaaxel
klovaaxel

Reputation: 47

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. The search bar doesn't seem to do much in the code you provided as the pointer-events: none; results in the search bar being impossible to 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>

Upvotes: 0

Odai Alodeh
Odai Alodeh

Reputation: 37

just remove the opacity or make it 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>

Upvotes: 2

Related Questions