Notifikationer

Markér alle som læst Log ud

jensgram Nybegynder

10. august 2003 - 13:27 Der er 20 kommentarer og
1 løsning

At skelne mellem input-felter

Hej Eksperter

Jeg har et stylesheet, hvor jeg vil lave formular-felter som følger:

input, select, textarea {
border: 1px inset #aaaaaa;
background-color: #ffffff;
color: #000000;
font-family: monospace;
font-size: 9pt;
}

Det fungerer også fint.

Eneste problem er, at "button", "submit" og "reset" skal have:

border: 1px outset #aaaaaa;

Bliver jeg nødt til at lave en klasse:

<input type="submit" class="input.knap" />

input.knap {
border: 1px outset #aaaaaa;
}

Eller hvordan?

Altså: Findes der en GYLDIG måde at skelne mellem, hvilken type felt der er tale om?
eg: input:button eller sådan noget?

Det er vigtigt, at det er gyldig CSS2!!!

På forhånd tak!

Synes godt om

erikjacobsen Ekspert

10. august 2003 - 13:29 #1

Hvis du ændrer til <input type="submit" class="knap" /> så bør det være det.

Synes godt om

roenving Novice

10. august 2003 - 13:35 #2

http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors

input[type=button], input[type=submit], input[type=reset]{
border: 1px outset #aaaaaa;
}

Synes godt om

jensgram Nybegynder

10. august 2003 - 13:41 #3

erik > Ja, men det ville jo være rart at slippe for ;)

rønving > Det vil jeg kigge på - det ser interessant ud...

Synes godt om

jensgram Nybegynder

10. august 2003 - 13:54 #4

Øv - det virker ikke efter planen i IE6:

test.html

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" href="styles/nynormal.css">
</head>

<body>

<form method="post" action="#">

<input type="text" value="text 150px" style="width: 150px;"><br>
<input type="text" value="text"><br><br>

<input type="submit" value="submit 150px" style="width: 150px;"><br>
<input type="submit" value="submit"><br><br>

<input type="reset" value="reset 150px" style="width: 150px;"><br>
<input type="reset" value="reset"><br><br>

<input type="button" value="button 150px" style="width: 150px;"><br>
<input type="button" value="button"><br><br>

<textarea cols="15" rows="15" name="ild">textarea</textarea><br><br>

<a href="http://jigsaw.w3.org/css-validator/check/referer">css2</a>

</form>

</body>
</html>

nynormal.css

input, select, textarea {
border: 1px inset #aaaaaa;
background-color: #ffffff;
color: #000000;
font-family: monospace;
font-size: 9pt;
}
input[type=button], input[type=submit], input[type=reset]{
border: 1px outset #aaaaaa;
}

De bliver stadig med inset-border!

Synes godt om

roenving Novice

10. august 2003 - 13:59 #5

Ja, jeg måtte jo også lige prøve, og fandt ud af, at M$ heller ikke her overholder standarden, attribute-selectors virker ellers ganske udmærket i Mozilla ...

Synes godt om

jensgram Nybegynder

10. august 2003 - 14:01 #6

Damn - IE er _træls_!

Virker det i Mozilla?

Så er det OK for mig! Det skal blot overholde standarden! Smider du et svar?

Synes godt om

jensgram Nybegynder

10. august 2003 - 14:04 #7

Da jeg ikke selv har Mozilla må du gerne tjekke ovenstående... Jeg er lidt usikker på, om

input, select, textarea {
border: 1px inset #aaaaaa;
background-color: #ffffff;
color: #000000;
font-family: monospace;
font-size: 9pt;
}
input[type=button], input[type=submit], input[type=reset]{
border: 1px outset #aaaaaa;
}

Også får

Synes godt om

jensgram Nybegynder

10. august 2003 - 14:04 #8

UPS:

(fortsættelse)

background-color: #ffffff;
color: #000000;
font-family: monospace;
font-size: 9pt;

til at gælde for

input[type=button], input[type=submit], input[type=reset]{

Gider du teste, rønving?

Synes godt om

roenving Novice

10. august 2003 - 14:15 #9

Jep, det kører som det skal !-)

En knap bliver i IE (6 sp1) inset, men i Mozilla (1.5) outset !-)

-- og for lige at blive sikker prøvede jeg at ændre farven i standard-opsætningen til røde bogstaver, og så fulgte både IE og Mozilla med ...

-- velbekomme '-)

Synes godt om

jensgram Nybegynder

10. august 2003 - 14:17 #10

OK - det var pænt af dig!

Synes godt om

roenving Novice

10. august 2003 - 14:19 #11

-- og tak for points ;~}

Synes godt om

erikjacobsen Ekspert

10. august 2003 - 15:40 #12

attribute-selectors er selvfølgelig en sjov idé, uanset om nu IE vil eller ej ;)

Men strengt taget er de næsten altid "forkerte" at bruge. De holder sig udelukkende
til HTML-syntaksen, og tillader ikke i sig at skelne mellem forskellige felter af
samme type. Det er ikke fordi man altid har brug for det, men man bør altid planlægge
med at gøre det muligt at udvide sit system. Det er mere "rigtigt" at navngive sine
felter, og andre HTML-elementer, med klasse-navne, efter hvad de rent faktisk er og
faktisk repræsenterer, og så efterfølgendee i sin CSS tage stilling til hvordan
de skal se ud. Måske har man flere klasser, der kommer til at se helt ens ud, men
man har planlagt og åbnet mulighed for at differentiere udseendet på et senere
tidspunkt.

Men det er jo bare hvad jeg synes ;) .... og enkelte andre ude i den store verden.

Synes godt om

roenving Novice

10. august 2003 - 15:46 #13

>>erik

-- men faktisk er class og id jo 'bare' særtilfælde af attribute-selectors ...

Synes godt om

erikjacobsen Ekspert

10. august 2003 - 17:29 #14

Jo, ja, men forstå mig rigtigt ;)

Synes godt om

roenving Novice

10. august 2003 - 17:39 #15

Grundsynspunktet kan jeg sagtens følge dig i ,-)

-- men jeg undrer mig over dit udtryk: 'en sjov idé' om en grundlæggende css-standard ...

-- iøvrigt ville jeg også i høj grad forlade mig på arvelighed (se også det andet næsten samtidigt stillede spm), og på den måde generere min differentiering, specielt af input- og a-elementer ...

-- for netop ved layout er der idé i grupperingen, som kan opnås ved sammensatte selectors, ie. .menu a:link:visited:hover:active{} !-)

Synes godt om

jensgram Nybegynder

10. august 2003 - 19:38 #16

Jeg må indrømme, at jeg holder på begge heste ;)

Jeg opfatter dig, Erik, som en fornuftig mand, der virkelig ved, hvad du taler om (dermed ikke sagt, at du vrøvler, Rønving). Derfor kan jeg også sagtens følge dig i dit synspunkt. Nu lå det dog sådan, at jeg ikke lige gad rette _mange_ sider, så jeg gik efter den lette løsning - den der åbenbart er indbygget i CSS2. Det er dog ikke umuligt, at jeg senere vil ændre løsningen!

Rønving er nu også inde på noget af det rigtige, da <input />-felter jo dækker over mange områder. Således bør en indbygget differentiering være tilgængelig. Det var den jeg ledte efter - og den jeg fandt...

Indtil videre skal I begge havde tak for at dele jeres synspunkter...

Synes godt om

erikjacobsen Ekspert

10. august 2003 - 20:08 #17

Jeg vil skam heller ikke nødvendigvis have dig til at lave det om ;)
Det er fint som et "hack" i vedligeholdelsen, og mit forslag er bedst ved nyudvikling.

Det er den gamle skelnen mellem syntaks (dvs udnytte type="input") og semantik, hvor
man har sagt hvad tingene er (class="tilmeldingsformularfelt"). Og det minder om
sammenligningen mellem HTML (man siger hvordan tingene skal se ud) og XML (man siger
hvad tingene er).

Synes godt om

roenving Novice

10. august 2003 - 20:17 #18

Registrerede I min pointe om arv og gruppering:
<html><head>
<style TYPE="text/css">
input{
color:#444;
}
.vigtige input{
color:#f00;
}
</style>
</head>
<body>
Navn: <input value="Skriv dit navn" type="text"><br>
<span class="vigtige">
Mail-adresse: <input type="text" value="email-adresse"> Vigtig!
</span>
</body>
</html>

?-)

Synes godt om

jensgram Nybegynder

10. august 2003 - 21:38 #19

Rønving > Faktisk meget smart ;) (dog ikke anvendeligt i mit tilfælde)

Synes godt om

roenving Novice

10. august 2003 - 21:49 #20

Det gættede jeg godt nok også på, men den er særdeles anvendelig i f.eks. links i menuer, som ofte har en hel anden farveholdning en resten af en side !-)

Eller hvis man har en liste i en tabel, så kan man f.eks. have alternerende farver på rækkerne, og vil så også have at indholdets tekst-farve skifter parallelt ...

Men det var bare for at være sikker på, at i havde fåetden del af min pointe med !-)

Synes godt om

jensgram Nybegynder

10. august 2003 - 21:50 #21

Den er hermed fanget ...

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS