PHP Forum - "input Type" mittels CSS Style ansprechen

PHP Forum (http://www.selfphp.de/forum/index.php)

- HTML, CSS und JavaScript Help! (http://www.selfphp.de/forum/forumdisplay.php?f=24)

- - "input Type" mittels CSS Style ansprechen (http://www.selfphp.de/forum/showthread.php?t=25574)

Joergi

26.04.2015 19:57:20

"input Type" mittels CSS Style ansprechen

Hi,

ich bin gerade dabei, meine Grafikbuttons gegen mit CSS generierte Buttons auszutauschen. Das ganze funktioniert auch bei ganz normalen links (a href) einwandfrei. Nur bei Formular Buttons habe ich Probleme. Bisher habe ich mittels

HTML-Code:

<input name="zur" value="zur" src="taste.png" type="image" onclick="an ()">  <!-- durch onclick wird zusätzlich noch eine Ladegrafik gezeigt -->

eine Aktion aufgerufen. Nun sollte anstatt des Grafikbuttons eben ein CSS Button erscheinen. Aber das klappt nicht. Ich habe alle Möglichkeiten meines bescheidenen Wissens genutzt. Z.B. auch

HTML-Code:

<div class="taste">Taste<input name="zur" value="zur" type="hidden" onclick="an ()"></div>  <!-- durch onclick wird zusätzlich noch eine Ladegrafik gezeigt -->

Aber das funktionierte nicht. Habt Ihr eine Lösung. Ich wäre euch sehr dankbar:-)

csskoeln

27.04.2015 19:19:33

AW: "input Type" mittels CSS Style ansprechen

Hallo,

eine kleine Lektüre:

http://www.w3schools.com/css/css_att..._selectors.asp

Am einfachsten geht dies jedoch, wenn du einfach dem Formularfeld eine Classe zuweist.

PHP-Code:


		
			
<input name="sumit" value="submit" type="submit"[I] class="deinecssclass"[/I]>

Joergi

29.04.2015 01:08:55

AW: "input Type" mittels CSS Style ansprechen

Hi,

danke für die schnelle Antwort. Ich habe das ganze umgesetzt

HTML-Code:

<style>

.taste

{

border:1px solid #000080;

display:inline-block;

color:#ff0000;

font-size:15px;

height:22px;

line-height:22px;

width:120px;

text-align:center;

cursor:pointer;

}

a.taste:link {color: #ff0000;}

a.taste:visited {color: #ff0000;}

a.taste:active {color: #ff0000;}

a.taste:hover {color: #ff0000;}

</style>

<input name="test" value="Beispiel" class="taste" type="submit">

und kann auch mehrere submit Buttons einzeln abfragen. Was mich jedoch stört sind zwei Effekte:

Wenn ich auf den Button klicke, verschiebt sich der Text leicht nach rechts. Kann man das verhindern?

Der Text ist nicht vertikal zentriert. Habe es mit "vertical-align" und auch mit "padding" probiert. Gibt es eine andere Lösung?

Danke im voraus für Eure Hilfe

Alle Zeitangaben in WEZ +2. Es ist jetzt 19:59:34 Uhr.