CODEWITHSUNDEEP
cssstyling
user2085266
user2085266

Reputation:

CSS style not applying to text box

I have some css that is not being applied to atext area:

/* Style The Text Input Boxes */
.input_style [type=text, type=date] {
background: white;
    border: 1px solid #ffa853;
    border-radius: 5px;
    box-shadow: 0 0 5px 3px #ffa853;
    color: #666;
    float: left;
    padding: 5px 10px;
    width: 165px;
    outline: none;
}

/* Input Box hover styling */
.input_style:hover {
    border: 2px solid #00008B;
    background-color: GhostWhite;
}

and here is where I use it:

First Name:<input type="text" name="ud_first" value="<?php echo $first; ?>" maxlength="12" size="12" class="input_style"/>
Last Name:<input type="text" name="ud_last" value="<?php echo $last; ?>" maxlength="36" size="12" class="input_style" />
Equpment Borrowed:<input type="text" name="ud_Equipment_Borrowed" value="<?php echo $eqpmnt_brwd; ?>" maxlength="60" size="14" class="input_style" /><br />
Service Tag:<input type="text" name="ud_Service_Tag" value="<?php echo $svc_tag; ?>" maxlength="6" size="6" class="input_style" /><br />
Date Taken:<input type="date" name="ud_Date_Taken" value="<?php echo $date_brwd; ?>" class="input_style" /><br />
Returned:<input type="radio" name="ud_Returned" value="Yes" <?php if($rtrnd == 'Yes') echo 'checked'; ?> class="input_style" /> Yes<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
<input type="radio" name="ud_Returned" value="No" <?php if($rtrnd == 'No') echo 'checked'; ?> class="input_style" /> No<br /><br />
Additional Comments:<br>
<textarea name="ud_Comments" maxlength="150" cols="40" rows="3" wrap=HARD class="input_style"><?php echo $comments; ?></textarea> <br /> <br />

I've looked at several examples and seem to be following them exactly but the styling is not being applied to the text boxes. Does anyone see what might be wrong? Thanks.

Upvotes: 0

Views: 886

Answers (2)

Rich Remer
Rich Remer

Reputation: 2603

.input_style[type=text],
.input_style[type=date] {
    ...
}

Upvotes: 2

John
John

Reputation: 5834

Try

/* Style The Text Input Boxes */
.input_style[type=text],
.input_style[type=date] {
background: white;
    border: 1px solid #ffa853;
    border-radius: 5px;
    box-shadow: 0 0 5px 3px #ffa853;
    color: #666;
    float: left;
    padding: 5px 10px;
    width: 165px;
    outline: none;
}

/* Input Box hover styling */
.input_style:hover {
    border: 2px solid #00008B;
    background-color: GhostWhite;
}

Upvotes: 3

Related Questions