我在Wordpress上做了一个搜索表单。我已经按照自己的口味设计了搜索表单,似乎在Webkit浏览器(Chrome &Safari),甚至IE(有点)。不幸的是,Firefox和Opera完全忽略了我的CSS样式,甚至在Firebug中都没有显示。
这可能是什么原因?我试过- moz_appearance,没有;但这没什么区别。
//in index.php
<span class="search">
<?php get_search_form(); ?>
</span>
//in searchform.php
<form role="search" method="get" class="searchForm" action="<?php echo home_url( '/' ); ?>">
<div>
<input type="text" value="Search" name="s" class="searchBox" onblur="if (this.value == '') {this.value = 'Search';}"onfocus="if (this.value == 'Search') {this.value = '';}" />
</div>
</form>
//style.css
.search {
float: right;
margin: 0 0 0 10px;
background: none;
}
form.searchForm input {
float: left;
margin: 0px 8px 0px 0px;
padding: 0;
width: 50px;
height: 30px;
border: 0;
border-bottom: 1px solid #000;
background: none;
color: #000;
font-size: 16px;
font-family:ProximaNova-Light,helvetica,arial,sans-serif;
-webkit-transition:.2s;
-moz-transition:.2s;
-ms-transition:.2s;
-o-transition:.2s;
-webkit-appearance: none;
}
form.searchForm input:focus {
width: 180px;
}
的URL: http://jorenfrielink.com/beta2/
提前感谢你的帮助。我以前设计过一些表单,它们在Opera和Firefox中运行得很好。
Firefox似乎在遇到以下规则时停止读取css文件:
.archiveListWrap:hover > .archiveListImg img {
-webkit-filter: grayscale(1);
filter: url("data:image/svg+xml;
filter: gray;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
}
看一下这篇关于在css中使用SVG的文章
你可以这样改变CSS,它会起作用
.searchForm input
{
float: left;
margin: 0px 8px 0px 0px;
padding: 0;
width: 50px;
height: 30px;
border: 0;
border-bottom: 1px solid #000;
background: none;
color: #000;
font-size: 16px;
font-family:ProximaNova-Light,helvetica,arial,sans-serif;
-webkit-transition:.2s;
-moz-transition:.2s;
-ms-transition:.2s;
-o-transition:.2s;
-webkit-appearance: none;
}
.searchForm input:focus
{
width: 180px;
}