Avatar billede Slettet bruger
23. juni 2008 - 18:53 Der er 11 kommentarer og
2 løsninger

Select form-felt / CSS

Hej,

Jeg mangler lidt hjælp til at style en Select-boks med CSS.

- Hvordan laver jeg en farvet border istedet for standardfarven.
- Hvordan laver jeg et indryk af teksten i select-boksen med 20px?
- Hvordan undgår jeg der kommer ekstra luft ind under tabellen?

Min HTML kode:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td>
<form class="archiveform" action="">
<select name="Months">
<option value="http://www.link.dk">April 2008</option>
<option value="http://www.link.dk">Marts 2008</option>
<option value="http://www.link.dk">Februar 2008</option>
<option value="http://www.link.dk">Januar 2008</option>
</select></form>
</td>
</tr>
</table>
Avatar billede roenving Novice
23. juni 2008 - 18:56 #1
Det kan du ikke, bl.a. fordi en del browsere henter elementet fra styresystemet, mens nogle styresystemer henter den fra browseren !-)

-- eneste chance er at opbygge din egen ved hjælp af en stak div-elementer og en røvfuld javascript !-)
Avatar billede olebole Juniormester
23. juni 2008 - 18:58 #2
<ole>

Gør nu ét spørgsmål færdigt ad gangen:
    http://www.eksperten.dk/spm/835919

Flere af de ting, du spørger om her, har du allerede fået besvaret i den anden tråd  =)

/mvh
</bole>
Avatar billede olebole Juniormester
23. juni 2008 - 19:01 #3
- og det eneste af det, du spørger om, som er muligt, er at give tabellen noget luft på undersiden:
    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-bottom:80px">
Avatar billede Slettet bruger
23. juni 2008 - 19:14 #4
olebole, det virkede bare ikke som om jeg fik nogen brugbar løsning i den anden tråd. opretter du et svar så får du points da jeg nu ved det ikke kan lade sig gøre pånær det med margin-bottom.
Avatar billede olebole Juniormester
23. juni 2008 - 20:11 #5
Så vil jeg gerne dele med roenving, som jo pindede den dybere årsag ud - hvilket vist aldrig blev gjort i den anden tråd  ;o)
Avatar billede mclemens Nybegynder
23. juni 2008 - 20:48 #6
For at undgå at der kommer ekstra mellemrum under
formen kan du istedet for Ole's forslag prøve med:

<style type="text/css">
form {margin:0;}
</style>
Avatar billede olebole Juniormester
23. juni 2008 - 20:51 #7
*LoL* jeg havde helt misforstået den del af spm'et. Du vil undgå luft - ikke have mere luft. Så er mclemens' løsning naturligvis helt korrekt  ;D
Avatar billede mclemens Nybegynder
23. juni 2008 - 21:10 #8
- Sniger mig med ind ... ;)

M.h.t. 2) så virker det som Ole og
Roenving siger ikke - undtagen i FF.

<style type="text/css">
form {margin:0;}
option {padding-left:20px;}
select {padding-left:20px;}
</style>

(text-indent giver samme effekt)

M.h.t. 1) Så er det nærmeste nok dette:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>
<style type="text/css">
form {margin:0;}
select {border:0;margin:-1px;position:relative;left:5px;top:5px;}
#baggrund{background:url('http://www.eksperten.dk/img/elogo.png');float:left;padding:0 10px 10px 0;}
</style>
</head><body>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td>
<form class="archiveform" action="">
<div id="baggrund">
<select name="Months">
<option value="http://www.link.dk">April 2008</option>
<option value="http://www.link.dk">Marts 2008</option>
<option value="http://www.link.dk">Februar 2008</option>
<option value="http://www.link.dk">Januar 2008</option>
</select></div></form>
</td>
</tr>
</table>

</body></html>

- Hvis det ikke skal være et billede kan url'en erstattes til en farve.
... Der er så lagt en div udenom for at lave borderen, og en margin:-1px
for at slette den eksisterende blå border, men det er som Roenving hentyder
ustabilt da det er systemspecifikt (og browserspecifikt) rendering ...
Avatar billede olebole Juniormester
23. juni 2008 - 21:31 #9
- og i FF kan man såmænd med DOM lægge billeder, tabeller, formfelter - og hvad man ellers måtte synes er sjovt - ind omkring og i options. Det er rasende invalidt ... men det kan gøres  =)
Avatar billede olebole Juniormester
23. juni 2008 - 21:40 #10
Hehe ... test i FF:

<select id="sel">
    <option>En tekst A</option>
    <option>En tekst B</option>
    <option>En tekst C</option>
    <option>En tekst D</option>
</select>

<script type="text/javascript">
var oSel = document.getElementById("sel");
var oClone = oSel.cloneNode(true);
var aOpts = oSel.getElementsByTagName("option");
for (var i=aOpts.length-1; i>=0; i--) {
    aOpts[i].appendChild(oClone.cloneNode(true));
}
</script>

Ikke, at man kan bruge de indre selects til noget, da de fjerner fokus fra den yderste og klapper denne sammen - men det er sgi da en syg bruser!  :D

Bevares, IE er ikke meget bedre, men den renderer det dog ikke som selects  =)
Avatar billede Slettet bruger
24. juni 2008 - 17:57 #11
olebole: roenving har ikke lavet et svar. Men vil gerne dele points imellem dig og mclemens. Ved bare ikke hvordan man deler points?
Avatar billede Slettet bruger
24. juni 2008 - 17:58 #12
Nå fandt ud af det. :)
Avatar billede mclemens Nybegynder
24. juni 2008 - 19:19 #13
Tak for point :)
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