Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS form styling doesn't display in firefox/Opera
    primarykey
    data
    text
    <p>I've made a searchform on Wordpress. I've styled the searchform to my own taste and all seems to be working fine in Webkit browsers (Chrome &amp; Safari) and even IE (kinda). Unfortunately Firefox and Opera completely ignore my CSS styling, it doesn't even show up in Firebug.</p> <p>What can be the cause of this? I've tried -moz-appearance: none; but it makes no difference.</p> <pre><code>//in index.php &lt;span class="search"&gt; &lt;?php get_search_form(); ?&gt; &lt;/span&gt; //in searchform.php &lt;form role="search" method="get" class="searchForm" action="&lt;?php echo home_url( '/' ); ?&gt;"&gt; &lt;div&gt; &lt;input type="text" value="Search" name="s" class="searchBox" onblur="if (this.value == '') {this.value = 'Search';}"onfocus="if (this.value == 'Search') {this.value = '';}" /&gt; &lt;/div&gt; &lt;/form&gt; //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; } </code></pre> <p>URL: <a href="http://jorenfrielink.com/beta2/" rel="nofollow">http://jorenfrielink.com/beta2/</a></p> <p>Thank's for your help in advance. I have styled a few forms before and they worked fine in Opera and Firefox.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload