Value-Tag im input formatieren

[Doc_McSky]

Hallo Leute,

weiß jemand bzw. kann man überhaupt den Value-Tag eines input Befehls formatieren?
Also nicht komplett mittels CSS, sondern nur Teile davon.

Kann man also aus einem Button der standardmäßig so aussieht:

  
<input type="button" name="xy" value="Senden">  

...den Text "Senden" so änden, dass da z.B. das "S" in fett oder unterstrichen dasteht, um z.B. einen accesskey hervorzuheben?

Gruß
Doc

[Der Martin]

Hallo,

weiß jemand bzw. kann man überhaupt den Value-Tag eines input Befehls formatieren?

bitte achte darauf, die richtigen Begriffe zu verwenden: Es gibt keinen value-Tag, und es gibt in HTML auch keinen input-Befehl. Es gibt nämlich *überhaupt keine Befehle* in HTML.

Du meinst die Beschriftung eines input-Elements (die mit dem value-Attribut angegeben wird).

Kann man also aus einem Button der standardmäßig so aussieht:

<input type="button" name="xy" value="Senden">

...den Text "Senden" so änden, dass da z.B. das "S" in fett oder unterstrichen dasteht, um z.B. einen accesskey hervorzuheben?

Nein. Wenn du die Beschriftung eines Buttons gezielt formatieren willst, solltest du auf das button-Element anstelle eines input-Elements umsteigen. Da kannst du die Beschriftung beliebig formatieren, weil sie hier als Inhalt des Elements angegeben wird, und nicht als Attribut:

<button type="button" name="xy"><span>S</span>enden</button>

  
button  
 { font-family: Verdana, Arial, Sans-Serif;  
   color: #F00;  
 }  
button span  
 { text-decoration: underline;  
   color: #000;  
 }  

Beachte, dass ein button-Element mit type="button" noch keine eigene Funktion hat, sondern höchstens über einen onclick-Handler mit Javascript zum Leben erweckt werden kann. Alternativ kann dieser Button mit type="submit" als normaler Absende-Button verwendet werden.

Ciao,
 Martin

[Doc_McSky]

Hallo nochmal,

vielen Dank für die schnelle Antwort, das wäre natürlich eine Möglichkeit, auf die ich so schnell gar nicht kam, das war ja mal wieder einfach. :-)

bitte achte darauf, die richtigen Begriffe zu verwenden: Es gibt keinen value-Tag, und es gibt in HTML auch keinen input-Befehl. Es gibt nämlich *überhaupt keine Befehle* in HTML.

Sorry! Wollte die Syntax des HTML natürlich nicht verfälschen, es sind natürlich alles Kinder- und ElternElemente und darin enthalten sind Attribute.

...ich Dusel, wie konnte das nur passieren. ;-)

Trotzdem Danke,
Gruß, Doc

[Gunnar Bittersmann]

@@Doc_McSky:

nuqneH

weiß jemand bzw. kann man überhaupt den Value-Tag eines input Befehls formatieren?

„Aber »Tags« klingt doch cooler? Nein.“

Kann man also aus einem Button der standardmäßig so aussieht:
<input type="button" name="xy" value="Senden">
...den Text "Senden" so änden, dass da z.B. das "S" in fett oder unterstrichen dasteht, um z.B. einen accesskey hervorzuheben?

Nein.

Aber so einen:
<button type="button" name="xy">Senden</button>

button::first-letter  
{  
    font-weight: bold;  
    text-decoration: underline;  
}

Funktioniert in Webkits, Opera stellt fett dar, aber nicht unterstrichen. Firefox kennt zwar '::first-letter', wendet das aber nicht auf Buttons an.  IE kennt auch in der 8er Version '::first-letter' noch nicht.

Qapla'

[molily]

»The :first-letter pseudo-element applies to block, list-item, table-cell, table-caption and inline-block elements.« (CSS 2.1) Das button-Element ist ein Inline-Element.

button p {
margin: 0;
}
button p:first-letter {
font-weight: bold;
text-decoration: underline;
}

<button><p>Senden</p></button>

IE 6, 7, 8, Firefox 2, 3, 3.5, Opera 9.64, Safari 4, Chrome 2.0.172.33, 3.0.193.1

Ich habe nicht die CSS-3-Schreibweise getestet, ich wüsste auch nicht, warum man die verwenden sollte, außer man will mutwillig Browser ausschließen.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

»The :first-letter pseudo-element applies to block, list-item, table-cell, table-caption and inline-block elements.« (CSS 2.1)

Oops, ja, das steht auch in [CSS3=SELCTORS §7.2] so drin. Allerdings mit dem Zusatz: “A future version of this specification may allow this pseudo-element to apply to more element types.”

Offenbar haben die meisten Browser das schon so implementiert.

Ich habe nicht die CSS-3-Schreibweise getestet, ich wüsste auch nicht, warum man die verwenden sollte, außer man will mutwillig Browser ausschließen.

Hm, stimmt, ':first-letter' versteht auch der IE.

Es kann aber nicht schaden, Pseudoklassen und Pseudoelemente unterscheiden zu können. Microsoft hätte zumindest dem 8er schon die CSS3-Syntax beibringen können.

Qapla'