Hvid kant på SELECT Tag

Du skal benytte et stylesheet, hvor du definerer hvordan tekstfelter, inputboxe etc. skal se ud. Kigger lige efter i gemmerne...

F.eks. kan du lege lidt med denne her og benytte <SELECT .... class="input">

.input
{
    BORDER-BOTTOM: black 1px solid;
    BORDER-LEFT: black 1px solid;
    BORDER-RIGHT: black 1px solid;
    BORDER-TOP: black 1px solid;
    FONT-FAMILY: Verdana, Helvetica, Arial;
    FONT-SIZE: 10px
}

select { border:opx; }

det skal være 0px. er lidt træt her

Det hjælper ikke rigtig.... har lavet et inline style i SELECT tag'en som er

<select style="color: #000000; background-color: #33CC00; letter-spacing: 1pt; border: 1px outset #666666" size=1 name=valg>

Burde det ikke kunne gøre det?..... desvære hjælper det ikke...

vent lidt. der er ikke nogen border style defineret for <select>
http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/select.asp

<style>select {border:transparent;clip:rect(2 auto auto 2);position:absolute;}</style>
laver tricket, men så skal du slås med absolute position.

<style>select {clip:rect(2 auto auto 2);position:absolute;}</style>
det er helt sikkert ikke min dag.

Det er jo lige det jeg gerne ville have undgået... men kan man ikke bruge inline istedet for Absolute position?

prøv det her og leg selv videre derfra
<html><head>
<style>select {clip:rect(2 80 20 2);width:82px;position:absolute;background-color:#74f6d8;}</style>
</head>
<body bgColor="#1efe3f">
<select>
<option>e</option>
</select>
</body></html>

som du kan se er bredden i clip sat til 2 mindre en den aktuelle bredde og en select er pr default 20px høj.

Æhm... alligevel... det hjalp heller ikke....

tsunami. desværre... clip virker kun på objekter med position:absolute :(.

Vent lige 5 minutter så får du en holdbar løsning.

Den ligger i en tabel og TD'en ser sådan ud....

<td align="center" valign="middle" bgcolor="#009900"><div>
<form method=get action=../search_redirect.asp>
  <input style="color: #000000; background-color: #33CC00; letter-spacing: 1pt; border: 1px #666666" name=Keyword size=30>
  <select style="color: #000000; background-color: #33CC00; letter-spacing: 1pt; padding: 1px" size=1 name=valg>
  <option style="color: #000000; background-color: #33CC00; letter-spacing: 1pt" value="value" selected>min side</option>
  <option style="color: #000000; background-color: #33CC00; letter-spacing: 1pt" value="value">Google</option>
</select>
<input style="color: #000000; background-color: #33CC00; letter-spacing: 1pt; border: 1px outset #00CC00" type=submit value=Søg name=Action>
</FORM>
</div></td>

Som du nok kan se er det noget svært at lave det i et stylesheet... især når de får ny farve på hver side

sæt din select ind i en div. så virker det.
<html><head>
<style>select {clip:rect(2 80 20 2);width:82px;position:absolute;background-color:#74f6d8;}</style>
</head>
<body bgColor="#1efe3f">
tekst
<div>
<select>
<option>e
<option>e
<option>e
<option>e
</select>
</div>
</body></html>

eller inline.
<select style="clip:rect(2 80 20 2);width:82px;position:absolute;background-color:#74f6d8;">

Den vil ikke =maddog=... tror det kan være en bug i IE6?

Desuden forsvinder submit knappen hvis jeg prøver

ikke helt. desværre.

well. den absolut sidste workaround bliver at indsætte en spacer med samme bredde som selecten.
<td align="center" valign="middle" bgcolor="#009900"><div>
<form method=get action=../search_redirect.asp>
  <input style="color: #000000; background-color: #33CC00; letter-spacing: 1pt; border: 1px #666666" name=Keyword size=30>
  <select style="clip:rect(2 80 20 2);width:82px;position:absolute;color: #000000; background-color: #33CC00; letter-spacing: 1pt; padding: 1px" size=1 name=valg>
  <option style="color: #000000; background-color: #33CC00; letter-spacing: 1pt" value="value" selected>min side</option>
  <option style="color: #000000; background-color: #33CC00; letter-spacing: 1pt" value="value">Google</option>
</select><img width="83" height="1" src="spacer.gif">
<input style="color: #000000; background-color: #33CC00; letter-spacing: 1pt; border: 1px outset #00CC00" type=submit value=Søg name=Action>
</FORM>
</div></td>

Jeg ved godt den her er grå. http://www.nikolajdu.dk/select/selectSmart.html

Det er reelt den ENESTE metode til at lave sin helt egen selectbox og det kan jo f.eks være nødvendigt, hvis ikke man vil se på sorte boxe og alt muligt andet.

I virkeligheden er det ikke nogen select, men et billede, der viser og skjuler en iframe, der så igen indeholde diverse links.

Smid en mail så zipper jeg den ned til evt. folk der ikke lige kan gennemskue det.

/Nikolaj

jeg giver op. med mindre du vil lave det hele med absolut position. virkelig ked af det.

nikolajdu, den er oxe sat til absolut position som den ligger der. kan den sættes ind som static?

Næh, men den kan flyttes efter behov. Og tilpasser sig selv der hvor du sætter den.

Og modsat alle mulige CSS løsninger, så virker det i alle 4+ browsere :))

P.s Tak til Ole Bole for inspiration.

sidste trut i trompeten. det hele absolut positioneret
<td align="center" valign="middle" bgcolor="#009900"><div style="position:relative;width:330;height:28;">
<form method=get action=../search_redirect.asp>
  <input style="left:2;top:4;position:absolute; color: #000000; width:200; background-color: #33CC00; letter-spacing: 1pt; border: 1px #666666" name=Keyword size=30>
  <select style="left:205;clip:rect(2 80 20 2);width:82px;top:2;position:absolute;color: #000000; background-color: #33CC00; letter-spacing: 1pt; padding: 1px" size=1 name=valg>
  <option style="color: #000000; background-color: #33CC00; letter-spacing: 1pt" value="value" selected>min side</option>
  <option style="color: #000000; background-color: #33CC00; letter-spacing: 1pt" value="value">Google</option>
</select>
<input style="left:290;top:3;position:absolute;color: #000000; background-color: #33CC00; letter-spacing: 1pt; border: 1px outset #00CC00" type=submit value=Søg name=Action>
</FORM></div>
</td>

Hvis det virker for dig må det vist være mit design et eller andet sted der ikke får det til at virke få det virker bare ikke... der bliver ved med at være en hvid kant... kan det være fordi der er en hvid bagrund på siden og tabellen er grøn?

Næææ.. den blev ved med at være hvid selvom jeg skiftede baggrundsfarven

den ser ellers ret raffy ud nikolajdu 8-O

tsunami> det ser fint ud hos mig. også med hvid baggrund.
http://www.dsr.kvl.dk/~maddog/e214643.html

tak og ligefrem 8-0

Du lyder som den danske score i de kommende indledende runder til f'bol wm...

Det er det jeg undre mig over for hos mig gør den ikke... har du en email så kan jeg sende dig et screenshoot så du selv kan se

tsunami - hvilken browser bruger du...

maddog@dsr.kvl.dk

IE6

http://www.dsr.kvl.dk/~maddog/e214643.jpg

Så har jeg sendt den... og så tror jeg han forstår det med absolute position :o)

det fatter jeg IKKE en bjælde af. virker det link jeg gav ikke. under alle omstændigheder kan du se et screen-shot fra min computer af. når det nu virker på både IE og NS6 herovre kan jeg jo ikke andet end antage at det er OK.

Ja... jeg fatter det heller ikke og derfor tror jeg ikke det er noget med den stump kode som vi har rodet med men noget andet i layoutet der gør den hvid

ok. men jeg må altså se dyner nu. jeg kører på 30. time nu og er ved at brænde sammen. det er lidt ærgerligt, for du kan jo se at det burde/kunne komme til at virke.

Godt jeg aldrig tager den slags ture ;-) *ROFL*

<warning! sarkasm sensors are flashing red>

har du hittet ud af det? eller skal vi lukke og slukke?

Har ikke rigtig hittet ud af det i nu men prøvede lige at holde spørgsmålet åbent hvis der var andre der viste noget

Tror ikke du skal regne med mere.

Nej kan der være noget om....

tsunami: jeg er rimelig sikker på at min løsning dur, men ikke er ordentligt implementeret. det kan være vi skal have et kig på din sovs-kode.

Kan det være denne linie der laver sovsen???...

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

uha tsunami. det er min gamle slang fra #hest. sovs-kode er ikke nedsættende. det betyder bare source-kode :D.
din doctype er det ikke noget i vejen med, hvis den validerer. ellers kan du ligeså godt slette den. jeg mente bare om du havde en development udgave online. f.x. under igloo.gl/test/ eller sådan noget. jeg vil helst undgå at du poster hele din source (og det vil du vel også helst selv).

Desvære sidder jeg og laver den på localhost og jeg sidder bag en Firewall på et netværk så jeg kan ikke engang give dig en IP adresse som du kan se den på.... den eneste mulighed jeg har er at zippe koden og sende den til dig via mail....

ok maddog@dsr.kvl.dk
lover intet.