Множество классов для элемента ввода

Question

У меня есть один стиль (тень теней на фокусе) для всех полей ввода на моем сайте, но для поля ввода поиска мне нужен другой стиль (без тени окна). Как мне это сделать с 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; 
} 

Answer 1

box-shadow: none не отменяет окно теневой собственности.

box-shadow: 0 0 делает трюк (с outline: none, чтобы удалить Chromes контура фокус по умолчанию размытость)

Тогда вы должны быть ориентированы на :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.

Demo

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