designe dropdown boxe med CSS

Det er ikke rigtigt muligt med CSS, du kan dog ændre nogle få ting men det er så lidt at det kan være ligemeget, desuden er resultatet af det der virker sjældent hvad du ville forvente. Du kan ændre bg farven, med background-color kan bare ikke huske om den skal på <select> eller <option> for at det virker. Men generelt er det ikke muligt :(

det er faktisk mest kanten jeg vil til livs... den passer ikke ind

Du kan ikke ændre kanten (border) i IE vil den lave din border uden om den eksisterende istedet for at ændre den :(

Det er langhåret, men den eneste "rigtige" måde hvorved kan definere den slags er ved at lave hele skidtet selv.

http://www.nikolajdu.dk/select/selectSmart.html

Består af 2 dokumenter, 2 billeder, en iframe og en hulens masse scripting (Tak til OleBole for inspirationen)

/Nikolaj

Nikolajdu > Burde det egentlig ikke være muligt at lave det mere "simpelt". Du siger at dit eksempel består af 2 dokumenter, 2 billeder og en iframe. Istedet for en iframe kunne man vel bruge et <div> layer, og dermed kun have et dokument, og en hulens masse scripting :) Har dog ingen speciel ide i hovedet, til hvordan det kunne laves i praksis, så langhåret er jeg dog ikke *gg*

Teoretisk jo, men mindre langhåret bliver det egenligt ikke :))

Med garanti ikke :) Men jeg ville da mene det var nemmere at arbejde med... Hmm, tror sgi det skal være mit næste projekt, kan sikkert blive spændende med et par extra søvnløse nætter :)

havde håbet på en nem løsning, men sådan er det jo med programmering...

Så har vi layer løsningen klar...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
   
    <LINK REL="StyleSheet" HREF="css/ie.css" type="text/css">
    <style>
   
    .mitLayerDu {
    font-family:        verdana,arial;
    font-size:            12px;
    color:                #ffffff;
    background-color:    #333333;
    background-image:URL(guitar.gif);
    background-repeat:no-repeat;
    background-position : right;
}


a:link{color: #ffffff;text-decoration: none;}
a:visited{color: #ffffff;text-decoration: none;}
a:active{color: #FFCCFF;text-decoration: underline;}
a:hover{color: #FFCC00;text-decoration: underline;}


    </style>
   
    <script>

luk = false;
aaben = true
   
function showSel(billedet,linket) {
    thisSel = document.getElementById("mySel");
    if (thisSel.style.visibility == "hidden") {
        selL = xPos(billedet);
        selT = yPos(billedet);
        thisSel.style.left = selL + 0;
        thisSel.style.top = selT + 21;
        thisSel.style.visibility = "visible";
        document.getElementById("selFrame").style.visibility = "visible";
    }
    else {
        thisSel.style.visibility = "hidden";
    }
}


function yPos(what){
    var picY = getY(document.images[what]);
    return picY;
}

function xPos(what){
    var picX = getX(document.images[what]);
    return picX;
}

function getY(obj) {
    if (obj == document.body) {
        return obj.offsetTop
    }
    else {
        return obj.offsetTop + getY(obj.offsetParent);
    }
}
function getX(obj) {
    if (obj == document.body) {
        return obj.offsetLeft
    }
    else {
        return obj.offsetLeft + getX(obj.offsetParent);
    }
}
   
ns4 = (document.layers)? true:false
ie4 = (document.all && !document.getElementById)? true:false
ie5 =(document.getElementById)? true:false
ns6 = (document.getElementById && !document.all)?true:false;
clicked = false;

function ud(id){

var styleObj = (ns4)? document.layers[id] : (ie4)? document.all[id].style : document.getElementById(id).style;
styleObj.visibility = "hidden";
}


</script>
   
</head>

<body>

<img type="image" src="sel2.gif" id="selPic" width="136" height="21" onclick="aaben=true" onmousedown="showSel('selPic','select.html');">

<div id="mySel" style="position:absolute;visibility:hidden;" onmouseout="if(luk!=false){ud('mySel');ud('selFrame')}" onblur="ud('mySel');ud('selFrame');" onmouseover="aaben=false" >
    <div id="selFrame" class="mitLayerDu"style="position:absolute;top:0;left:0;width:135;height:180;z-index:2;border:0">
   
<a href="#" onmouseover="luk=false;" onclick="ud('mySel');ud('selFrame');">hej 1</a><br>
<a href="#" onmouseover="luk=false;" onclick="ud('mySel');ud('selFrame');">hej 2</a><br>
<a href="#" onmouseover="luk=false;" onclick="ud('mySel');ud('selFrame');">hej 3</a><br>
<a href="#" onmouseover="luk=false;" onclick="ud('mySel');ud('selFrame');">hej 4</a><br>
<a href="#" onmouseover="luk=false;" onclick="ud('mySel');ud('selFrame');">hej 5</a><br>
<a href="#" onmouseover="luk=false;" onclick="ud('mySel');ud('selFrame');">hej 6</a><br>
<a href="#" onmouseover="luk=false;" onclick="ud('mySel');ud('selFrame');">hej 7</a><br>
   
    </div>
</div>
</body>
</html>

/Nikolaj

skal holde koden så lille så mulig, fylder rigligt med aspkoden alene.
tak for et ellers spændende bud :)