0

ワードプレスで検索フォームを作りました。私は自分の好みに合わせて検索フォームのスタイルを設定しましたが、Webkit ブラウザー (Chrome & Safari) や IE (ちょっと) でもすべて正常に動作しているようです。残念ながら、Firefox と Opera は私の CSS スタイルを完全に無視し、Firebug にも表示されません。

これの原因は何ですか？-moz-appearance: none; を試しました。しかし、違いはありません。

//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 でうまく機能しました。

4

2 に答える 2

0

動作するように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;
}
于 2013-05-20T14:22:01.950 に答える
0

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 の使用に関するこの記事をご覧ください。

于 2013-05-20T14:22:50.620 に答える