---

Hej NG

Jeg har på mine sider defineret et bestemt udseende på inputs og har
derefter ved at tildele alle knapper klassen class="knapper" for at få dem
til at se normale ud. Det virker fint.

Men på den side, der fremkommer ved en Freefind-søgnig, er nogle knapper,
som jeg af gode grunde ikke kan lave det nummer med.

Jeg har derefter prøvet i css at selektere inputs af typen 'submit' for at
give dem det ønskede udseende:

input submit {
color: #black;
background: #d4d0c8;
}

Men det fanger ikke. Der er altså en syntaksfejl. Spørgsmålet er så: Hvordan
fanger jeg de knapper, så jeg kan style dem - og sådan, at det virker i alle
gængse browsere?

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk/

---

Erik Ginnerskov wrote:
> input submit {
> color: #black;
> background: #d4d0c8;
> }
>
> Men det fanger ikke. Der er altså en syntaksfejl. Spørgsmålet er så: Hvordan
> fanger jeg de knapper, så jeg kan style dem - og sådan, at det virker i alle
> gængse browsere?

Hej Erik

En lidt tricky sag. Teoretisk set burde du være i stand til at bruge
attribute selectors i CSS, således:

input[type=submit] {
color: black;
}

Attribute selectors understøttes dog ikke i IE. Til gengæld har IE
introduceret expression definitions i CSS. Expressions giver dig
mulighed for at indsætte jscript kode direkte i CSS; glimrende værktøj,
der bl.a. giver dig mulighed for at definere dit css stil selektivt:

input {
color: expression(this.type=="submit"?'black':'white');
}

Bringer du begge definitioner med i din CSS template, burde det
(forhåbeligt) virke på størsteparten af de gængse browsere (med
forbehold for IE-brugere med deaktiveret javascript).

Håber, det hjælper.

t

---

Tomasz Otap wrote:

> En lidt tricky sag. Teoretisk set burde du være i stand til at bruge
> attribute selectors i CSS, således:
>
> input[type=submit] {
> color: black;
> }
>

input[type=submit] {
color: #000;
background: #d4d0c8;
}

Virker i FF og Opera

> Attribute selectors understøttes dog ikke i IE. Til gengæld har IE
> introduceret expression definitions i CSS.
>
> input {
> color: expression(this.type=="submit"?'black':'white');
> }

input {
background: expression(this.type=="submit"?'#d4d0c8':'#fff');
}

Virker i IE.

Jeg bukker og takker.

Jeg forstår bare ikke formålet med at definere to farver, når det kun skal
gælde en enkelt setting - her: baggrundsfarve på en submit-knap.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk/

---

Erik Ginnerskov skrev:

> input {
> background: expression(this.type=="submit"?'#d4d0c8':'#fff');
> }
>
> Virker i IE.

For en sikkerheds skyld (og for at sikre valideringen) vil jeg
foreslå dig at putte ovenstående ind i en conditional, så det kun
er IE der ser den.


> Jeg forstår bare ikke formålet med at definere to farver, når
> det kun skal gælde en enkelt setting - her: baggrundsfarve på
> en submit-knap.

Css-reglen fanger alle input-elementer og tildeler dem en
baggrundsfarve. Værdien af den baggrundsfarve bestemmes af
javascript-udtrykket i expression. Det er en kort if-form der kan
beskrives som følger:

x ? y : z
=> if (x) { y } else { z }

I eksemplet ovenfor er det boolske udtryk dette:    

   this.type=="submit"

Hvis det er sandt (og input-elementet altså er en submit-knap)
bruges den første værdi efter spørgsmålstegnet (#d4d0c8), ellers
vælges den sidste værdi: #fff.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen wrote:

> For en sikkerheds skyld (og for at sikre valideringen) vil jeg
> foreslå dig at putte ovenstående ind i en conditional, så det kun
> er IE der ser den.

Det har jeg skam gjort for længe siden. ;)

> Css-reglen fanger alle input-elementer og tildeler dem en
> baggrundsfarve. Værdien af den baggrundsfarve bestemmes af
> javascript-udtrykket i expression. Det er en kort if-form der kan
> beskrives som følger:
>
> x ? y : z
> => if (x) { y } else { z }
>
> I eksemplet ovenfor er det boolske udtryk dette:
>
> this.type=="submit"
>
> Hvis det er sandt (og input-elementet altså er en submit-knap)
> bruges den første værdi efter spørgsmålstegnet (#d4d0c8), ellers
> vælges den sidste værdi: #fff.

Tak, så behøver jeg ikke bruge tid på at eksperimentere med at ændre det.
Det *skal* bare være sådan.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk/

---

Erik Ginnerskov wrote:
> Jeg har derefter prøvet i css at selektere inputs af typen 'submit' for at
> give dem det ønskede udseende:
>
> input submit {
> color: #black;
> background: #d4d0c8;
> }
>
> Men det fanger ikke. Der er altså en syntaksfejl. Spørgsmålet er så: Hvordan
> fanger jeg de knapper, så jeg kan style dem - og sådan, at det virker i alle
> gængse browsere?

Den eneste måde jeg umiddelbart kender er attribut selectoren:
input[type="submit"] {
}

Desværre virker det ikke i Internet Explorer, så her kommer du nok ikke
meget længere. Så hvis du ikke kan lave om på form-elementernes
klasse-navne, så må du nok enten droppe det helt eller lave om på alle
input felterne i formen, fx
form.formnavn input {