开发者

Styling an Input Field

开发者 https://www.devze.com 2022-12-30 23:07 出处:网络
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.

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开发者_StackOverflow社区 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;
    }


Use this css:

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


You target the div with just .submissionfield. Try .submissionfield input { // stuff } to target the input element within the div with that class.

0

精彩评论

暂无评论...
验证码 换一张
取 消