Campo ricerca non si visualizza correttamente con tutti i browser
Questo č il css:
Codice PHP:
/* Box del campo totale di ricerca */
.boxricerca {
width: 180px !important;
}
/* Campo Cerca */
.s, .field {
width: 130px !important;
border: 1px solid #E6E6E6 !important;
border-top-left-radius: 4px !important;
border-top-right-radius: 0 !important;
border-bottom-left-radius: 4px !important;
border-bottom-right-radius: 0 !important;
padding-right: 0px !important;
}
/* Pulsante "Cerca" */
#searchsubmit {
position: relative;
float: right;
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eee', endColorstr='#ccc',GradientType=0 ); /* IE6-9 */
width: 50px !important;
height: 34px !important;
color: #408000 !important;
margin-top: 2px !important;
margin-left: -10px !important;
box-shadow: 0px 0px 0px #666;
border-top-right-radius: 4px !important;
border-top-left-radius: 0 !important;
border-bottom-right-radius: 4px !important;
border-bottom-left-radius: 0 !important;
text-transform: capitalize;
z-index: 10;
}
#searchsubmit:hover {
position: relative;
float: right;
width: 50px !important;
height: 34px !important;
color: #ff6666 !important;
border-top-right-radius: 4px !important;
border-top-left-radius: 0 !important;
border-bottom-right-radius: 4px !important;
border-bottom-left-radius: 0 !important;
text-transform: capitalize;
z-index: 10;
}
e questo il codice HTML:
Codice PHP:
<form class="boxricerca" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
<label class="assistive-text"> <?php _e( 'Search', 'wp-portfolio' ); ?> </label>
<input type="search" placeholder="<?php esc_attr_e( 'Search', 'wp-portfolio' ); ?>" class="s field" name="s">
<input type="submit" class="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Cerca', 'submit button', 'wp-portfolio' ); ?>" />
</form><!-- search-form -->
Con Safari i visualizza correttamente:
http://i66.tinypic.com/qno9xy.png
Con altri browser il pulsante non č centrato:
http://i68.tinypic.com/rj0gth.png
