Стилизация поля ввода

Question

Когда я пытаюсь изменить CSS для поля ввода с именем «title» ниже, которое классифицируется как «submissionfield», позиция изменяется, но высота, длина и шрифт поля не меняются.

Как можно сделать высоту поля ввода «заголовок» 22 px, длину 550 px и шрифт 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

Вы нацеливаетесь на div только с .submissionfield. Попробуйте .submissionfield input { // stuff } нацелить входной элемент в div с этим классом.

Answer 2

Используйте этот CSS:

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