html - 如何正确地将占位符和文本置于搜索输入中？

Question

我想问的是，当用户在此搜索框中输入字符时，如何正确地居中对齐案例“搜索”中的占位符和实际文本？非常感谢您的帮助。

这是我的 html:

<form action="http://wordpress1.brighter-software.co.uk" id="searchform" method="get" class="cf">
   <fieldset style="border:none; margin:0; padding:0;">
      <input type="search" id="search-field" class="cf" name="s" placeholder="Search" required="">
      <input type="image" id="search-submit" class="cf" alt="Search" src="http://wordpress1.brighter-software.co.uk/wp-content/themes/201/images/search-icon.png">
   </fieldset>
</form>

这是我的 CSS:

/*
=====================
Search Bar
===================== */
#searchform {
  float:right;
  border:none;
  margin-right:40px;
  background-color:#272727;
}
#searchform input[type="search"]:focus {
  outline:none;
}
#search-field {
  float:right;
  background-color: #272727;
  border: none;
  width:80%;
  line-height:3;
  white-space:nowrap;
  overflow:hidden;
  text-align:right;
  color:#FFF;
}
#search-submit {
  float:left;
  width:50px;
}
::-Webkit-input-placeholder { /* For WebKit browsers */
  direction: rtl;
  color:white;
  font-size:1.3em;

}
::-moz-placeholder { /* For Mozilla Firefox 4 to 18 */
  direction: rtl;
  color:white;
  font-size:1.3em;

}
::-moz-placeholder { /* For Mozilla Firefox 19+ */
  direction: rtl;
  color:white;
  font-size:1.3em;

}
::-ms-input-placeholder { /* For Internet Explorer 10+ */
  direction: rtl;
  color:white;
  font-size:1.3em;
} 

Answer 1

如果我没听错，您想将文本(和占位符)置于 <input type="search" ... > 的中心.只需更改 text-align:right;的 #search-field选择器到 text-align:center; :

#search-field {
  float:right;
  background-color: #272727;
  border: none;
  width:80%;
  line-height:3;
  white-space:nowrap;
  overflow:hidden;
  text-align:center;
  color:#FFF;
}

这是一个 fiddle .