用css

Question

在一个标准的HTML页面，我知道如何改变输入的外观变化领域的在轨外观，但在轨道上我投入的构成就像

<div class="field"> 
    <%= f.label :name %><br/> 
    <span style="color:red;font-weight: normal; font-size:11px; "><%= errors_for(:name, @user) %> </span> 
    <%= f.text_field :name %>  
</div> 

他们像浏览器中显示正常的领域。如何使用CSS来使它看起来像在这页http://kb.worldsecuresystems.com/tutorials/的顶部的搜索栏（略显圆润的边缘，1px的＃999中风，尺寸较大）谢谢

Answer 1

您将需要应用CSS实际<input>

.field input { 
    color: #999; 
    font-weight: bold; 
    font-size: 24px; 
    padding: 10px; 
    border: 2px solid #999; 
    border-radius:2px; 
} 

See it on jsFiddle