How can i move the text inside the searchbar?

user_18377198 0
Viewed 75

Im trying to move the box inside the search bar a little bit to the right but i dont know how can i do it. So the line that appears when someone click on the line to search for something doesnt get cut off.

body {
    background-color: rgb(221, 221, 221);
}

.search-container {
    padding-top: 3px;
}

input[type="search"] {
    background: rgb(255, 255, 255);
    height: 30px;
    width: 200px;
    border: none;
    border-radius: 15px 0 0 15px;
    outline: none;
}

button[type="submit"] {
    border-radius: 0 15px 15px 0;
    height: 30px;
    width: 70px;
    cursor: pointer;
    background-color: rgb(228, 228, 78);
    border: none;
    position: relative;
    left: -5px;
}

button[type="submit"]:hover {
    background-color: rgb(233, 233, 84);
}
<div class="search-container">
  <form>
    <input type="search" placeholder="Search...">
    <button type="submit">Search</button>
  </form> 
</div>

placeholder css html
2 Answers

Simply Add a padding-left value to the input element

input[type="search"]{
  padding-left: 6px;// or any value you want
}
user_132951890

As my colleague Adel Al-Awdy has already correctly mentioned. With padding-left you can influence the inside spacing of the input element. https://developer.mozilla.org/en-US/docs/Web/CSS/padding

working example 

body {
    background-color: rgb(221, 221, 221);
}

.search-container {
    padding-top: 3px;
}

input[type="search"] {
    background: rgb(255, 255, 255);
    height: 30px;
    width: 200px;
    border: none;
    border-radius: 15px 0 0 15px;
    outline: none;
    padding-left: 15px;
}

button[type="submit"] {
    border-radius: 0 15px 15px 0;
    height: 30px;
    width: 70px;
    cursor: pointer;
    background-color: rgb(228, 228, 78);
    border: none;
    position: relative;
    left: -5px;
}

button[type="submit"]:hover {
    background-color: rgb(233, 233, 84);
}
<div class="search-container">
  <form>
    <input type="search" placeholder="Search...">
    <button type="submit">Search</button>
  </form> 
</div>

user_148071110
Related