Avatar billede tipsen Nybegynder
30. oktober 2002 - 23:58 Der er 10 kommentarer og
1 løsning

Styling af SELECT i FORM!

Hej Eksperter

Jeg har følgende html-form:

<form action="/nytommy/index.php" name="frm">
<select name="limit" size="1" class="test" onchange="document.frm.submit()">
  <option value="3" SELECTED>3</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="13">13</option>
</select>
</form>

og følgende css-kode:

select.stdinput {
    width: 20px;
    color: #000066;
    background: #FFFFFF;
    border: 1px inset #CCCCCC;
    padding: 1px;
}

Mit primære problem er at der automatisk ligger et "linieskift" når man laver en formular! Jeg vil gerne skrive "Display #select-boks# records per page" hvor man så kan vælge antal poster i boksen - derfor skal det meget gerne stå på samme linie! På nuværende tidspunkt bliver output:

Display
#select-boks#
records per page

hvilket ser pænt kikset ud :-)

Sekundært er det træls, at det åbenbart ikke er alle egenskaber der fungerer for select-boksen - hvordan styler jeg den med border osv - skal man sætte styles på de enkelte OPTION-elementer - er der evt. nogen som har link til nogle eksempler?
Avatar billede tipsen Nybegynder
30. oktober 2002 - 23:58 #1
ok - der skulle have stået test i stedet for stdinput nede i css-klassen!
Avatar billede knudgert Nybegynder
31. oktober 2002 - 00:02 #2
Linjeskift kan du undgå med style="display: inline" på din <form>
Du kan ikke ændre udseende af border, pil og scrollbar, da det er en del af styresystemet der bruges til at vise det med.

Tal/tekst kan du ændre enten med en fælles for alle option eller med en individuel for hver.
Avatar billede tipsen Nybegynder
31. oktober 2002 - 00:09 #3
en "fælles for alle" option!?
Avatar billede tipsen Nybegynder
31. oktober 2002 - 00:25 #4
display:inline fik det op på en linie - har dog stadig nogle problemer med den plads som er på begge sider af formularen - jeg har to hidden inputs i starten af formularen - det virker som om de de tager plads selvom de ikke giver noget output på skærmen! Der er hvad der svarer til 2 mellemrum inden select-boksen og et mellemrum efter (inden for formularens grænser) - de 2 mellemrum inden boksen kan henføres til to hiddenfelter - de forsvinder hvis jeg fjerner hidden-felterne!! Mellemrummet efter select-boksen kan jeg ikke afgøre, hvor stammer fra - der er ikke yderligere ekstra elementer i forhold til min formular ovenfor - giver det mening?

NB: Jeg sætter lige pointsatsen op pga. mine ekstra spørgsmål!
Avatar billede tipsen Nybegynder
31. oktober 2002 - 00:27 #5
ok - jeg fandt ud af at mellemrummene stammede fra nogle linieskift! Men forstår stadig ikke helt ud af hvad du mener med en "fælles for alle" option!
Avatar billede grunken Nybegynder
31. oktober 2002 - 00:55 #6
Kan man måske se lidt mere kode så man har en mulighed for at få et overblik ????
Avatar billede grunken Nybegynder
31. oktober 2002 - 01:01 #7
du har ikke givet din <select> en class endnu ?

så du havde fundet ud af det (næsten)
Avatar billede tipsen Nybegynder
31. oktober 2002 - 01:02 #8
Jeg har lavet det her i CSS:

form.inlinenavigation {
    display: inline;
    color: #000066;
    background: #FFFFFF;
}

form.inlinenavigation select {
    width: 40px;
    font-size: 8pt;
}

fungerer reelt set ok, men det er ikke de store muligheder for at style den boks som valgmulighederne står i... :-/
Avatar billede knudgert Nybegynder
31. oktober 2002 - 01:21 #9
Med en fælles for option, enten kan du angive at alle options f.eks. skal have samme farve i din css
option {color: red}

eller lave en class
.roed {color: red}
.blaa {color: blue}

option class="roed"
option class="blaa"
Avatar billede lequet Nybegynder
31. oktober 2002 - 14:00 #10
Hvis du er interesseret, roder jeg i øjeblikket med et script der gør det muligt at lave selects hvor du selv kan bestemme udseendet. Foreløbigt er det stadig en beta-version, og der mangler en del detaljer, men du kan se et lille (knapt så godt) eksempel her. Det er ikke testet i IE (har ikke mulighed for det) men skulle virke

http://www.lequet.com/coolselect/
Avatar billede tipsen Nybegynder
31. oktober 2002 - 17:26 #11
lequet: Det fungerer fint i IE, men er lidt for tungt til mit formål!

Ellers tak for hjælpen til alle!
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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