web-dev-qa-db-fra.com

Le style d’entrée personnalisée [type = "submit"] ne fonctionne pas avec le bouton jquerymobile

Je souhaite utiliser mon style personnalisé sur le bouton d'entrée [type = "submit"] avec le bouton jquerymobiles mais il ne fonctionne pas . Mon code html est le suivant:

<input type="submit"  value="Button name">

Mon code CSS est:

input[type="submit"]
{
    border:1px solid red;
    text-decoration:none;
    font-family:helvetica;
    color:red;
    background:url(../images/btn_hover.png) repeat-x;
}

Le même style s'applique lorsque j'utilise le code html suivant:

<a href="#" class="selected_btn" data-role="button">Button name</a>
csshtml5jquery-mobile
17
Prasad

jQuery Mobile> = 1,4

Créez une classe personnalisée, par exemple .custom-btn. Notez que pour remplacer les styles jQM sans utiliser !important, la hiérarchie CSS doit être respectée. .ui-btn.custom-class ou .ui-input-btn.custom-class.

.ui-input-btn.custom-btn {
   border:1px solid red;
   text-decoration:none;
   font-family:helvetica;
   color:red;
   background:url(img.png) repeat-x;
}

Ajoutez un data-wrapper-class à input. La classe personnalisée sera ajoutée à input wrapping div.

<input type="button" data-wrapper-class="custom-btn">

Démo

jQuery Mobile <= 1.3

Le bouton Input est entouré d’une DIV de classe ui-btn. Vous devez sélectionner cette div et le input[type="submit"]. Utiliser !important est essentiel pour remplacer les styles Jquery Mobile.

Démo

div.ui-btn, input[type="submit"] {
 border:1px solid red !important;
 text-decoration:none !important;
 font-family:helvetica !important;
 color:red !important;
 background:url(../images/btn_hover.png) repeat-x !important;
}
22
Omar

Je suppose que vous ne pouvez pas utiliser les CSS pour votre bouton en utilisant la balise anchor. Vous devez donc redéfinir les styles CSS qui sont écrasés par d'autres éléments à l'aide de la propriété !important.

HTML

<a href="#" class="selected_btn" data-role="button">Button name</a>

CSS

.selected_btn
{
    border:1px solid red;
    text-decoration:none;
    font-family:helvetica;
    color:red !important;            
    background:url('http://www.lessardstephens.com/layout/images/slideshow_big.png') repeat-x;
}

Voici la démo 

0
Eli