CSS样式不适用于文本框

时间:2014-07-14 23:50:14

标签: css styling

我有一些未应用于文本区域的CSS:

/* 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;
}

这是我使用它的地方:

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 />

我已经查看了几个示例,并且似乎完全关注它们,但样式未应用于文本框。有谁看到可能有什么问题?感谢。

2 个答案:

答案 0 :(得分:3)

尝试

/* 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;
}

答案 1 :(得分:2)

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