CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

raan Nybegynder

12. juni 2007 - 17:22 Der er 21 kommentarer og
1 løsning

Vælg en farve

hej.

jeg mener jeg har set et sted at man kan lave select felterne sådan her: http://www.randersen.dk/farve.JPG
nogen der ved hvordan man gør?

Synes godt om

da9el Nybegynder

12. juni 2007 - 17:33 #1

Ik sikker, men har du prøvet at lave noget i stil med:

<option value="red"><img src="red.gif">Red</option>

Altså bare putte et billede i mellem de to tags..?

Synes godt om

sorensen_123 Nybegynder

12. juni 2007 - 17:34 #2

Det kan klares med css og standard html.

Du giver din røde select en class="roed" (f.eks. <option class="roed">Rød</option>)og laver denne her css:
.roed {
background: url('LINK_TIL_RØD_FIRKANT.jpg') left no-repeat;
padding-left: her skal så stå bredden på dit firkantede billede i px + 5, så bliver teksten flyttet så mange pixel ud fra venstre;
}
f.eks.:
.roed {
background: url('images/roed.gif') left no-repeat;
padding-left: 15px;
}

Hvis du så vil have andre farver, så kalder du class'en noget andet.
F.eks. class="groen", og laver en tilsvarende css:
.groen {
background: url('images/groen.gif') left no-repeat;
padding-left: 15px;
}

Synes godt om

raan Nybegynder

12. juni 2007 - 18:04 #3

jeg kan ikke få det til at virke sorensen_123 ?

Synes godt om

roenving Novice

13. juni 2007 - 00:23 #4

F.eks.

<select name="colorpicker">
<option>-- Vælg farve -- </option>
<option value="sort" style="background:#000;color:white;">Sort</option>
<option value="lilla" style="background:#f0f;color:white;">Lilla</option>
<option value="blå" style="background:#00f;color:white;">Blå</option>
<option value="grøn" style="background:#0f0;color:white;">Grøn</option>
<option value="gul" style="background:#ff0;color:blue;">Gul</option>
<option value="orange" style="background:#f70;color:white;">Orange</option>
<option value="rød" style="background:#f00;color:white;">Rød</option>
<option value="hvid" style="background:#fff;">Hvid</option>
</select>

Synes godt om

raan Nybegynder

13. juni 2007 - 00:29 #5

roenving: det er langt fra sådan .. se mit pic!

Synes godt om

roenving Novice

13. juni 2007 - 00:47 #6

Kan du ikke linke til dit forsøg ?-)

Synes godt om

raan Nybegynder

13. juni 2007 - 01:38 #7

jamen jeg har gjort ligesom sorensen_123 har beskrevet! ;s

Synes godt om

roenving Novice

13. juni 2007 - 02:07 #8

Argh, jeg overså helt, at man jo ikke kan style options for andet en for- og baggrundsfarve !-)

Synes godt om

raan Nybegynder

13. juni 2007 - 10:38 #9

så det jeg prøver og lave, kan ikke lade sig gøre?

Synes godt om

roenving Novice

13. juni 2007 - 12:27 #10

Ikke uden at lave noget helt andet, der ser ud som en selectboks (noget med nogle div'er osv. !-)

Synes godt om

raan Nybegynder

13. juni 2007 - 17:02 #11

når okay ;s

Synes godt om

raan Nybegynder

14. juni 2007 - 15:09 #12

men kunne du evt. vise hvordan man gjorde det med div'er osv ? :)

Synes godt om

roenving Novice

15. juni 2007 - 14:21 #13

Hrm, jeg havde ikke et link, men så kan du få hele baduljen (her med font-eksempler, men det er altså et eksempel på den kunstige select !-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Kunstig select</title>

<meta name="Generator" content="Stone's WebWriter 4">
<style type="text/css">
.selectDiv div{cursor:pointer;}
</style>

</head>

<body>
<div style="width:150px;overflow:hidden;">
<div style="font-family:verdana,arial,sans-serif;cursor:pointer;" onclick="showHideSelect(this);">Vælg font</div>
<div class="selectDiv" style="display:none;">
<div style="font-family:arial;" onclick="setShow(this);">Arial</div>
<div style="font-family:'arial black';" onclick="setShow(this);">Arial Black</div>
<div style="font-family:'arial narrow';" onclick="setShow(this);">Arial Narrow</div>
<div style="font-family:Verdana;" onclick="setShow(this);">Verdana</div>
<div style="font-family:tahoma;" onclick="setShow(this);">Tahoma</div>
<div style="font-family:haettenschweiler;" onclick="setShow(this);">Haettenschweiler</div>
<div style="font-family:'courier new';" onclick="setShow(this);">Courier New</div>
</div>
</div>

<script type="text/javascript">
function showHideSelect(elm){
var selStyle = elm.parentNode.getElementsByTagName("div")[1].style;
selStyle.display = selStyle.display != "block" ? "block" : "none";
}
function setShow(elm){
var parDiv = elm.parentNode;
var sibs = parDiv.getElementsByTagName("div");
for(i=0,im=sibs.length;im>i;i++){
sibs[i].style.backgroundColor = "#fff";
sibs[i].style.color = "#000";
}
elm.style.backgroundColor = "#00f";
elm.style.color = "#fff";
var showDiv = parDiv.parentNode.getElementsByTagName("div")[0];
showDiv.style.fontFamily = elm.style.fontFamily;
showDiv.style.fontSize = elm.style.fontSize;//hvis du skal bruge flere forskellige selects
showDiv.firstChild.nodeValue = elm.firstChild.nodeValue;
elm.parentNode.style.display = "none";
}
</script>

</body>
</html>

-- den er dog lidt tricky, da den benytter en absolut nummerering af divs, så strukturen er ekstrem vigtig ...

Synes godt om

raan Nybegynder

18. juni 2007 - 17:55 #14

hvad så når jeg skal tilføje det til databasen? :)

Synes godt om

roenving Novice

18. juni 2007 - 22:20 #15

Så lav en hidden felt i formen, hvortil du også skriver value !-)

Synes godt om

raan Nybegynder

18. juni 2007 - 23:32 #16

ja selvfølgelig .. men hvad poster div'en sig som ? :-)

Synes godt om

roenving Novice

18. juni 2007 - 23:43 #17

Intet ...

-- kun form-felter submittes med en form, så værdier, der skal submittes skal nødvendigvis flyttes til et sådant !-)

Synes godt om

raan Nybegynder

19. juni 2007 - 11:57 #18

hvordan gør jeg det?

Synes godt om

roenving Novice

19. juni 2007 - 13:06 #19

<form action="dinSide.php">
<input type="hidden" name="farve">
</form>

-- og så tilføje en linje i ovenstående:

...
elm.style.color = "#fff";
document.forms[0].farve.value = elm.getElementsByTagName("span")[0].firstChild.nodeValue;/*hent farve-værdi f.eks. fra en tekst i en span*/
var showDiv ...

Synes godt om

raan Nybegynder

19. juni 2007 - 15:36 #20

jamen hvad bliver det så postet som?

Synes godt om

raan Nybegynder

24. juni 2007 - 10:43 #21

hm?

Synes godt om

raan Nybegynder

08. juli 2007 - 15:34 #22

lukker.

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

Programmeringssprog kurser

Kurser inden for grundlæggende programmering

Se alle Programmeringssprog kurser

Flere spørgsmål fra Andet programmering kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Rewrite i .htaccess til Joomla 5 Af andrew i Andet programmering	5	15/01/202520:23	16/01/202522:59
Kodning af element i custom css Af Jacob Hedelund i Andet programmering	3	14/10/202410:35	14/10/202419:46
Delphi 11 - converter webp til jpg fil Af juzas i Andet programmering	5	12/10/202413:28	14/10/202403:54
Trim tekst i batch script Af Dan Elgaard i Andet programmering	5	05/09/202411:08	10/09/202415:29
ASP Classic fil fra subfolder Af bsn i Andet programmering	3	07/05/202416:14	08/05/202401:00

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