Question

如何设置文本框的样式，就像这个电子邮件文本框一样？

<div id="main">
    <input type="button" id="btAdd" value="Add Element" class="bt" />
</div>

以下是展示我的问题的JSFiddle

Answer 1

您可以在html页面中添加css，如：

<style>
.input {
    color: #333333;
    height: 25px;
    margin: 5px;
    width: 250px;
}
</style>

在输入标记中添加placeholder="Email"，将在用户输入时删除。

点击此处Fiddle。

Answer 2

试试这将显示时尚的文本框

<input type="text"class="inputs" placeholder="e-mail" /> 
 <input type="password" class="inputs"placeholder="Password" /> 
  <style> 
inputs:-webkit-input-placeholder {
 color: #b5b5b5;
 }
 inputs-moz-placeholder {
color: #b5b5b5;
 }

.inputs {
width: 270px;
padding: 15px 25px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
font-size: 14px;
color: #9D9E9E;
text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0);
background: #FFF;
border: 1px solid #FFF;
border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
 }

 .inputs:focus {
  background: #DFE9EC;
  color: #414848;
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
 -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  outline: 0;
 }

 .inputs:hover {
  background: #DFE9EC;
  color: #414848;
  }
  </style>

样式HTML文本框

2 个答案: