样式化输入字段

Question

当我尝试更改下面名为“title”的输入字段（按“submissionfield”分类）的 CSS 时，位置会发生变化，但字段的高度、长度和字体不会改变。

如何使输入字段“标题”的高度为 22 像素，长度为 550 像素，字体为 Times New Roman？下面的 CSS 不这样做。

提前致谢，

约翰

echo '<form action="http://www...com/.../submit2.php" method="post"> 
    <input type="hidden" value="'.$_SESSION['loginid'].'" name="uid">  

    <div class="submissiontitle"><label for="title">Story Title:</label></div> 
    <div class="submissionfield"><input name="title" type="title" id="title" maxlength="1000"></div>  

    <div class="urltitle"><label for="url">Link:</label></div> 
    <div class="urlfield"><input name="url" type="url" id="url" maxlength="500"></div>

    <div class="submissionbutton"><input name="submit" type="submit" value="Submit"></div> 
</form>
';

CSS：

.submissiontitle
    {
    position:absolute;
    width:100px;
    left:30px;
    top:200px;
    text-align: left;
    margin-bottom:3px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#000000;
    }   


.submissionfield
    {
    position:absolute;
    width:550px;
    left:50px;
    top:230px;
    text-align: left;
    margin-bottom:3px;
    padding:0px;
    font-family: "Times New Roman", Times, serif;
    font-size: 22px;
    color:#000000;
    }   


.urltitle
    {
    position:absolute;
    width:250px;
    left:30px;
    top:300px;
    text-align: left;
    margin-bottom:3px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#000000;
    }       

.urlfield
    {
    position:absolute;
    width:550px;
    left:30px;
    top:330px;
    text-align: left;
    margin-bottom:3px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 11px;
    color:#000000;
    }       


.submissionbutton
    {
    position:absolute;
    width:250px;
    left:30px;
    top:380px;
    text-align: left;
    margin-bottom:3px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 11px;
    color:#000000;
    }       



.submittitle
    {
    position:absolute;
    width:250px;
    left:30px;
    top:150px;
    text-align: left;
    margin-bottom:3px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#000000;
    }

Answer 1

使用这个 css：

#title {
  font-family: 'Times New Roman';
  height:22px;
  width:550px;
}

Answer 2

您只使用.submissionfield 定位div。尝试.submissionfield input { // stuff } 使用该类定位 div 中的输入元素。