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 >
<form>
<input type="search" placeholder="Search...">
<button type="submit">Search</button>
</form>
</div>
CodePudding user response:
Simply Add a padding-left value to the input element
input[type="search"]{
padding-left: 6px;// or any value you want
}
CodePudding user response:
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 >
<form>
<input type="search" placeholder="Search...">
<button type="submit">Search</button>
</form>
</div>