Question

我的网站中的所有输入字段都有一种样式（Focus上的框阴影），但对于搜索输入字段，我需要一种不同的样式（没有框阴影）。我如何使用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。

演示

＆＃13;

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

＆＃13;

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

＆＃13;

输入元素的多个类

1 个答案: