HTML/CSS Bouton d'Entrée de Style ne fonctionne Pas
J'ai un bouton:
SUR
HORS
Voici le CSS:
.searchButton {
height: 31px;
width: 33px;
cursor: pointer;
border: none;
background:url(../img/searchButton-Off.png) no-repeat;
}
.searchButton:hover {
height: 31px;
width: 33px;
cursor: pointer;
border: none;
background:url(../img/searchButton-On.png) no-repeat;
}
Voici le code HTML:
<div class="searchBox">
<h2 style="color:000000;">Search</h2>
<form id="form_297586" class="appnitro" method="get" action="results.php">
<input id="keywords" name="keywords" class="searchBar" title="What do you like...?" type="text" maxlength="255" value=""/>
<input type="button" class="searchButton" />
<input type="hidden" name="form_id" value="297586" />
</form>
</div>
Voici ce que mon navigateur est rendu:
Safari
Opéra
Quand j'ai passer la souris sur le bouton, il est correct de commutation, puis affiche l'intégralité du bouton. Je ne sais pas pourquoi ce comportement qui se passe.
Pensées?
Ma première hypothèse est que quelque chose s'est mal passé avec les styles, et la largeur du texte du bouton est utilisé au lieu de la largeur que vous définissez dans votre feuille de style. Qu'advient-il si vous définissez une valeur sur le bouton pour mettre du texte, comme
Fonctionne très bien ici à l'Opéra, Chrome et Firefox: jsfiddle.net/j08691/63Lt7. BTW, je voudrais utiliser un sprite ici pour éviter le clignotement de l'image.
Comment aurais-je le faire avec des sprites CSS? Je suis relativement nouveau en CSS, donc je n'ai aucune expérience avec eux.
Et j08691, c'est bizarre qu'il travaille sur jsfiddle. Je ne suis pas sûr de ce qui est différent au sujet de mon code. Peut-être l'erreur est ailleurs et quelque chose est en train d'être remplacée.
value="test"
?Fonctionne très bien ici à l'Opéra, Chrome et Firefox: jsfiddle.net/j08691/63Lt7. BTW, je voudrais utiliser un sprite ici pour éviter le clignotement de l'image.
Comment aurais-je le faire avec des sprites CSS? Je suis relativement nouveau en CSS, donc je n'ai aucune expérience avec eux.
Et j08691, c'est bizarre qu'il travaille sur jsfiddle. Je ne suis pas sûr de ce qui est différent au sujet de mon code. Peut-être l'erreur est ailleurs et quelque chose est en train d'être remplacée.
OriginalL'auteur Jon | 2012-04-17
Vous devez vous connecter pour publier un commentaire.
Boutons ont beaucoup de style par défaut attaché à eux. Envisager de mettre en œuvre une réinitialisation de la feuille de style, comme:
Eric Meyer Réinitialiser
Normaliser.css
Aussi, un élément doit être mis à
display: block
ou de l'affichage:inline-block
pour que les dimensions pour pouvoir être fixés sur elle.Enfin, je vous recommande de mettre un exemple simplifié de votre problème en JSFiddle ou Dabblet de sorte qu'il est plus facile pour les gens à vous aider.
Espérons que cette aide!
EDIT: Maintenant que je peux voir votre exemple, le problème est que les styles par défaut dans le bootstrap.les css ont une spécificité plus élevée que vos styles. Quelque chose comme:
Devrait résoudre le problème.
De se! Merci un tas. J'ai pensé que c'était quelque chose comme ça.
OriginalL'auteur Tim Hettler
C'est probablement un cas de spécificité, d'où un ensemble plus précis de conditions prioritaires.
Essayez ceci:
Ou vous pourriez essayer:
OriginalL'auteur Erik Funkenbusch
background: url("../img/searchButton-Off.png") blanc no-repeat 9px;
il suffit de changer 9px pour tout px et faire en conséquence et aussi augmenter la hauteur:50px poids:50px
vous mettez ce code sur jsfiddle.net et je vais modifier sur elle
De la hauteur et de Poids...?
OriginalL'auteur Arpit Srivastava
mal!
vous avez
vous avez trop d'utilisation :
ou vous pouvez utiliser:
et Css:
OriginalL'auteur George Chokhonelidze