Styling an Input Field

Posted by John on Stack Overflow See other posts from Stack Overflow or by John
Published on 2010-05-21T13:04:49Z Indexed on 2010/05/21 13:10 UTC
Read the original article Hit count: 232

Filed under:
|

Hello

When I try to alter the CSS for the input field named "title" below, which is classed by "submissionfield", the position changes, but the height, length, and font of the field do not change.

How could I make the height of the input field "title" 22 px, the length 550 px, and the font Times New Roman? The CSS below does not do it.

Thanks in advance,

John

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>
';

The 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;
    }

© Stack Overflow or respective owner

Related posts about css

Related posts about html