Question

我想问一下如何在我的案例中正确对齐占位符＆＃39;搜索＆＃39;用户在此搜索框中输入字符时的实际文本是否正确？非常感谢你的帮助。

这是我的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 。

Answer 2

DEMO

input::-webkit-input-placeholder
{
  text-align:center;
  color: red;
}
:-moz-placeholder { /* Firefox 18- */
  text-align:center;  
}

::-moz-placeholder {  /* Firefox 19+ */
  text-align:center;  
}

:-ms-input-placeholder {  
  text-align:center; 
}

如何正确地将占位符和文本放在搜索输入中？

2 个答案: