webentwicklung-frage-antwort-db.com.de

Benutzerdefinierte Eingabe [type = "submit"] funktioniert nicht mit der jquerymobile-Schaltfläche

Ich möchte meinen benutzerdefinierten Stil für die Eingabe [type = "submit"] mit dem jquerymobiles-Button verwenden, aber es funktioniert nicht . Mein HTML-Code lautet:

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

Mein CSS-Code lautet:

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

Der gleiche Stil gilt, wenn ich den folgenden HTML-Code verwende:

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

jQuery Mobile> = 1.4

Erstellen Sie eine benutzerdefinierte Klasse, z. .custom-btn. Um jQM-Stile ohne !important zu überschreiben, sollte die CSS-Hierarchie berücksichtigt werden. .ui-btn.custom-class oder .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;
}

Fügen Sie einen data-wrapper-class zu input hinzu. Die benutzerdefinierte Klasse wird zu input wrapping div hinzugefügt.

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

Demo

jQuery Mobile <= 1.3

Die Input-Schaltfläche wird von einem DIV mit der Klasse ui-btn umschlossen. Sie müssen dieses div und den input[type="submit"] auswählen. Die Verwendung von !important ist wichtig, um die Jquery Mobile-Stile außer Kraft zu setzen.

Demo

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

Ich gehe davon aus, dass Sie mit Anchor-Tag keine CSS-Funktion für Ihren Button erhalten können. Sie müssen also die CSS-Stile überschreiben, die mit der !important-Eigenschaft von anderen Elementen überschrieben werden.

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;
}

Hier ist die Demo 

0
Eli