CODEWITHSUNDEEP
csspaddingplaceholdersearch-form
jOS
jOS

Reputation: 35

Padding for placeholder without changing the size of input

I do adaptive search form. Search field should take 100% width of the parent div (the width of the parent div will change depending on the resolution of the device). The button "Search" should always be at the right of the field, do not shift down.

A working version.

But there's a problem: The text "Search now" (placeholder) too close to the edge of the field and I can't move it to the right. In other examples, it moves by the set value for the field padding. But if I change the padding — field itself is shifted to the left, but I only need to move the text!

#searchfield {
   padding: 10px 0 13px 0; /* Try to change the left padding here! All field shifts to the left! But I need only shift the placeholder text to right! */
}

Upvotes: 2

Views: 6959

Answers (4)

Kadir Kirisci
Kadir Kirisci

Reputation: 21

This could do the trick for you. It solved the issue I was having. Tried on firefox and chrome

.random-class-name{
text-indent: 10px;
}

Text written inside the input is indented as well.

Upvotes: 2

Pavan
Pavan

Reputation: 655

Try adding text-align:center for id searchfield or add box-sizing: border-box; declaration.

try with any one of below examples, it will move the placeholder to right as you expected, these will support Ie lower versions too.

Example1 (using box-sizing:border-box declaration)

#searchfield {
     padding: 10px 0 13px 0px;
     box-sizing: border-box;
}

Example2 (using text-align:center declaration)

#searchfield {
      text-align:center;
}

Upvotes: 4

Sarower Jahan
Sarower Jahan

Reputation: 1495

No need to use position absolute. try this code:

<html>
 <body>
  <div id="sidebar">
    <div id="search">
      <form id="searchform" method="get" action="/index.php" _lpchecked="1">
      <input type="text" name="s" id="searchfield" placeholder="Search now">
      <input type="submit" id="searchsubmit" value="Search">
      </form>
     </div>
   </div>
 </body>
</html>


#sidebar {
  width: 20%;
  background: #ccc;
  height: 300px;
  padding: 20px;
}
#search {
  width: 100%;
  height: 50px;
  position: relative;}
#searchfield {
  width: calc(100% - 60px);
  border: 1px solid #ccc;
  margin: 0;
  padding: 10px 0 13px 20px; /* Try to change the left padding here! All field shifts to the left! But I need only shift the placeholder text to right! 
  position: absolute;*/
  right: 0;
  float:left;
  box-sizing:border-box;
}
#searchsubmit {
  width: 60px;
  height: 41px;
  background: red 0 0;
  border: 0;
  overflow: hidden;
  cursor: pointer;
  right: 0; 
  float:left;
  box-sizing:border-box;
}

live demo on code pen

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99474

You can still use padding to move the placeholder text, with the flavor of box-sizing: border-box; declaration.

box-sizing: border-box; make user-agents include padding/border to the width/height of the box.

#searchfield {
  width: 100%;
  border: 1px solid #ccc;
  padding: 10px 0 13px 10px;
  box-sizing: border-box;
  /* other declarations... */
}

Vendor prefixes omitted due to brevity.

#sidebar {
  width: 20%;
  background: #ccc;
  height: 300px;
  padding: 20px;
}
#search {
  width: 100%;
  height: 50px;
  position: relative;}
#searchfield {
  width: 100%;
  border: 1px solid #ccc;
  margin: 0;
  padding: 12px 0 13px 10px;
  box-sizing: border-box;
  position: absolute;
  right: 0;
}
#searchsubmit {
  width: 60px;
  height: 41px;
  background: red 0 0;
  border: 0;
  overflow: hidden;
  cursor: pointer;
  right: 0;
  position: absolute;
}
<html>
 <body>
  <div id="sidebar">
    <div id="search">
      <form id="searchform" method="get" action="/index.php" _lpchecked="1">
      <input type="text" name="s" id="searchfield" placeholder="Search now">
      <input type="submit" id="searchsubmit" value="Search">
      </form>
     </div>
   </div>
 </body>
</html>

It's worth mentioning that border-box is supported in IE8+ as well as modern web browsers.

Upvotes: 2

Related Questions