輸入元素的多個類

對於我的站點中的所有輸入字段，我有一種樣式（焦點上的框陰影），但對於搜索輸入字段，我需要不同的樣式（無框陰影）。我如何着手使用HTML和CSS來做到這一點。以下是我目前的CSS和HTML代碼片段，供您閱讀。輸入元素的多個類

HTML：

<div class="top-search"> 
<table width="190" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="175" height="22" align="left" valign="middle"> 
<?php if ($filter_name) { ?> 
<input class="top-search-field noshadow" type="text" name="filter_name" value="<?php echo $filter_name; ?>" /> 
<?php } else { ?> 
<input class="top-search-field noshadow" type="text" name="filter_name" value="<?php echo $text_search; ?>" onclick="this.value = '';" onkeydown="this.style.color = '#000000';" /> 
<?php } ?> 
</td> 
</tr> 
</table> 
</div><!-- top-search ends -->

CSS：

input[type='text'], input[type='password'], textarea { 
background: #FFFFFF; 
border: 1px solid #0066CC; 
/*padding: 3px; 
margin-left: 0px; 
margin-right: 0px;*/ 
box-shadow: 0 0 5px #FFFFFF; 
padding: 3px 0px 3px 3px; 
margin: 5px 1px 3px 0px; 
} 

input[type='text']:focus, input[type='password']:focus, textarea:focus { 
box-shadow: 0 0 5px rgba(81, 203, 238, 1); 
padding: 3px 0px 3px 3px; 
margin: 5px 1px 3px 0px; 
border: 1px solid rgba(81, 203, 238, 1); 
} 

input.noshadow { 
-webkit-box-shadow: none; 
-moz-box-shadow: none; 
box-shadow: none; 
}

來源

2014-10-02 user2171400

box-shadow: none不會取消開箱影子財產。

box-shadow: 0 0的伎倆（與outline: none，除去鉻合金默認焦點輪廓模糊）

然後你需要爲目標的:focus還有：

input.noshadow, input.noshadow:focus { 
    -webkit-box-shadow: 0 0; 
    -moz-box-shadow: 0 0; 
    box-shadow: 0 0; 
    outline: none; 
}

請注意 - 覆蓋性能由input[type=text]給出您需要使用input.noshadow。只需使用.noshadow將不起作用。這有點複雜，但最好有一個read about CSS specificity。

演示

input[type='text'], input[type='password'], textarea { 
 
box-shadow: 0 0 5px #F00; 
 
} 
 

 
input[type='text']:focus, input[type='password']:focus, textarea:focus { 
 
box-shadow: 0 0 5px #F00; 
 
} 
 

 
input.noshadow, input.noshadow:focus { 
 
-webkit-box-shadow: 0 0; 
 
-moz-box-shadow: 0 0; 
 
box-shadow: 0 0 ; 
 
outline: none; 
 
}

<input type="text" value="I have a shadow :D" /> 
 
<input type="text" class="noshadow" value="I am shadowless :O" />

來源

2014-10-02 05:09:59 misterManSam

謝謝你這麼多的答覆misterManSam。我會試試這個...但我在這方面還有一個問題... 除了無陰影之外，我可以將多個班級應用於第二個輸入嗎？例如：這項工作？ – user2171400 2014-10-02 05:37:23

是的，你可以有多個班級。只要確保異常類（在這種情況下爲'.noshadow'）在輸入CSS的其餘部分下面，以便覆蓋陰影。 – misterManSam 2014-10-02 05:42:40

**還要注意** - 要覆蓋'input [type = text]'給出的屬性，您需要使用'input.shadow'來覆蓋。只需使用'.shadow'就不會覆蓋它。這有點複雜，但可以[閱讀關於CSS的特殊性]（http://www.smashingmagazine.com/2010/04/07/css-specificity-and-herheritance/）。 – misterManSam 2014-10-02 05:52:13

輸入元素的多個類

回答

相關問題