Wie kann ich Bilder von Eingabeschaltflächen und deren Hover-Effekte mithilfe von CSS gestalten?

Bilder von Eingabeschaltflächen mit CSS gestalten

Einführung

Das Erstellen einer Eingabeschaltfläche mit einem Bild mithilfe von HTML ist unkompliziert, das Ändern ihres Erscheinungsbilds jedoch mithilfe von CSS herausfordernd sein. In diesem Artikel wird das Problem des Hinzufügens eines Bilds zu einer Eingabeschaltfläche und des Änderns seines Erscheinungsbilds beim Hover mithilfe einer CSS-Lösung behandelt.

Problem

Einige Benutzer versuchen, CSS zu verwenden, um eine Eingabeschaltfläche mit einem zu formatieren Image, stoßen aber auf Schwierigkeiten. Sie versuchen möglicherweise, eine benutzerdefinierte CSS-Klasse zu definieren, können jedoch nicht den gewünschten Hover-Effekt erzielen.

Lösung

Um eine Eingabeschaltfläche mit einem Bild mithilfe von CSS zu formatieren, ist es notwendig, den Typ „type Attribut." Anstelle von „type=‘image‘“ setzen Sie den Typ auf „type=‘submit‘“. Dadurch können Sie CSS verwenden, um das Erscheinungsbild der Schaltfläche zu steuern.

<input type="submit">

Sobald die Schaltfläche festgelegt ist Als „Senden“-Schaltfläche können Sie CSS-Stile auf die „myButton“-Klasse anwenden, um deren Aussehen zu definieren, einschließlich des Hinzufügens eines Bilds als Hintergrund.

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Mit diesem Ansatz können Sie die ändern Erscheinungsbild der Schaltfläche beim Hover mithilfe der Pseudoklasse „:hover“.

.myButton:hover {
    background-color: #ff0000;
}

Diese CSS-Lösung ermöglicht das Styling und den Hover-Effekt auf Eingabeschaltflächen mit Bildern und behebt so das Problem, mit dem Benutzer konfrontiert sind. Es ist jedoch wichtig zu beachten, dass Safari diese spezielle Stilmethode möglicherweise nicht unterstützt. In diesem Fall kann die Verwendung eines Bildes und einer On-Click-Funktion zum Absenden des Formulars erforderlich sein.

Das obige ist der detaillierte Inhalt vonWie kann ich Bilder von Eingabeschaltflächen und deren Hover-Effekte mithilfe von CSS gestalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!