How to make search bar responsive?-CodePudding

I want to make my html/css search bar responsive for example iphone 11. Search button drops down after hovering over it, when i open it from my phone. Here's the link: https://irinachikviladze.github.io/ How can I make it responsive using CSS?

 <div >
        <input  type="text" name="" placeholder="Type to search">
        <a  href="#">
            <i ></i>
        </a>
     </div>

CodePudding user response：

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

So just overwrite the default display for your search box and set it to flex with flex-direction: row;

that's it.

body{
    margin: 0;
    padding: 0;
    background:#e74c3c; 
 }
 .search-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #34495e;
    height: 40px;
    border-radius: 40px;
    padding: 10px;
    display: flex;
    flex-direction: row;
 }
 .search-box:hover > .search-txt{
    width: 240px;
    
    padding: 0 6px;
    }
 .search-box:hover > .search-btn{
    background : white ;
    
    }
 .search-btn{
    color: #e74c3c;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background:#34495e;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    overflow: hidden;
 }
 .search-txt{
    border:none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    color: white;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
    width: 0px;  
 }
 /* responsive*/
 @media only screen and (max-width: 828px){
   .search-box:hover > .search-txt{
      width: 125px;
      }
 }

 <body>
    <div >
       <input  type="text" name="" placeholder="Type to search">
       <a  href="#">
           <i ></i>
       </a>
    </div>
</body>

CodePudding user response：

Html element

<div >
<div >
<label>Search for your stack :)</label>
<div >
<div >
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24        24" fill="none" stroke="#657789" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" ><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
 </div>
<div >
  <input placeholder="search here...."/>
 </div>
</div>
</div>
</div>

CSS Element

@import url('https://fonts.googleapis.com/css?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css?family=Hind&display=swap');

* {
  -webkit-font-smoothing: antialiased;
  color: #acbdce;
}

:root {
  --border-radius: 10px;
}

body, html {
  background: #e2e9f4;
  display: grid;
  height: 100%;
  grid-template: 1fr/100%;
  place-items: center;
}

.Card {
  padding: 1px;
  border-radius: var(--border-radius);
  background: linear-gradient(-67deg, rgba(#c8d8e7, .7), rgba(255,255,255,.8));
  overflow: hidden;
  box-shadow: 
    -2px -2px 6px rgba(#fff, .6),
    2px 2px 12px #c8d8e7;
  width: 380px;
}

.CardInner {
  padding: 16px 16px;
  background-color: #e2e9f4;
  border-radius: var(--border-radius);
}

.container {
  display: flex;
}

.Icon {
  min-width: 46px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  margin-right: 12px;
  box-shadow: 
    -2px -2px 6px rgba(#fff, .6),
    2px 2px 12px #c8d8e7;
    
  svg {
    transform: translate(-1px, -1px);    
  }
}

label {
  font-family: "Hind", sans-serif;
  display: block;
  color: #3c4b66;
  margin-bottom: 12px;
  background: linear-gradient(45deg, rgba(#6b7b8f, 1), #3c4b66);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.InputContainer {
  width: 100%;
}

input {
  background-color: #e3edf7;
  padding: 16px 32px;
  border: none;
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  color: #a9b8c9;
  -webkit-appearance: none;
  transition: all 240ms ease-out;
  width: 100%;
  
  &::placeholder {
    color: #6d7f8f;
  }
  
  &:focus {
    outline: none;
    color: #6d7f8f;
    background-color: lighten(#e3edf7, 3%);
  }
};
  
.InputContainer {
  --top-shadow: inset 1px 1px 3px #c5d4e3, inset 2px 2px 6px #c5d4e3;
  --bottom-shadow: inset -2px -2px 4px rgba(255,255,255, .7);
  
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  
  &:before,
  &:after {
    left: 0;
    top: 0;
    display: block;
    content: "";
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  
  &:before {
    box-shadow: var(--bottom-shadow);
  }
  
  &:after {
    box-shadow: var(--top-shadow);
  }
}