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