transparent select list

[gpigate]

Is there a way to make a select or drop down list transparent?


} #calc .cbody .classbar0 select{
color: #000000;
background-color:#005fb1;
height:20px;
background: transparent no-repeat;
border:none;
font-size: 8pt;
font-family: Tahoma, Arial, Helvetica, sans-serif;
text-align:left;
position: absolute;
top:5px;
left: 680px;


that works in FF. however the top option works, the rest of the options have a black background and the option text cant be seen until hovered.

in IE... it does nothing.

any ideas?

[Nile]

Wait - let me get this straight. You want the hovered to be transparent and the rest black? Or do you want them all white(transparent)?

[gpigate]

http://outdoorsindoors.net/DEV/GPAW/index.php?page=mods/calc/calc1

take a look there in IE and FF.

in FF the top default option is fine. you click on the arrow and the rest is black.

in IE... it looks like a normal select list with no CSS.

just trying to get the select list to look like the rest of the fields. not sure i can do the select with css though..... :(

[Nile]

Try this:


} #calc .cbody .classbar0 select,#calc .cbody .classbar0 select option{
color: #000000;
background-color:#FFF;
height:20px;
border:none;
font-size: 8pt;
font-family: Tahoma, Arial, Helvetica, sans-serif;
text-align:left;
position: absolute;
top:5px;
left: 680px;
}

[gpigate]

really odd. works great for the first row in the loop. played around with it a good bit and cant get it to take hold on any of the other rows.

current code state


} #calc .cbody .classbar0{ position: absolute; width: 780px; height: 27px; top:175px; background: url(det_bar.jpg); margin:0;
} #calc .cbody .classbar0 .cname{color: #000000; height:20px; background: transparent no-repeat; border:none; font-size: 8pt; font-family: Tahoma, Arial, Helvetica, sans-serif; text-align:left; position: absolute; top:5px; left: 35px;
} #calc .cbody .classbar0 .cgrade{color: #000000; height:20px; background: transparent no-repeat; border:none; font-size: 8pt; font-family: Tahoma, Arial, Helvetica, sans-serif; text-align:left; position: absolute; top:5px; left: 440px;
} #calc .cbody .classbar0 .ccredit{ color: #000000; height:20px; background: transparent no-repeat; border:none; font-size: 8pt; font-family: Tahoma, Arial, Helvetica, sans-serif; text-align:left; position: absolute; top:5px; left: 520px;
} #calc .cbody .classbar0 .cqualpts{color: #000000; height:20px; background: transparent no-repeat; border:none; font-size: 8pt; font-family: Tahoma, Arial, Helvetica, sans-serif; text-align:left; position: absolute; top:6px; left: 600px;
} #calc .cbody .classbar0 .cgradepts{color: #FFFFFF; height:20px; background: transparent no-repeat; border:none; font-size: 8pt; font-family: Tahoma, Arial, Helvetica, sans-serif; text-align:left; position: absolute; top:6px; left: 680px;
} #calc .cbody .classbar0 .clevel{color: #FFFFFF; background-color:#005fb1; height:20px; border:#333333 1px 1px 1px 1px; font-size: 8pt;
font-family: Tahoma, Arial, Helvetica, sans-serif; text-align:left; position: absolute; top:5px; left: 340px;
} #calc .cbody .classbar0 select,#calc .cbody .classbar0 select option{color: #000000; background-color:#FFF; height:20px; border:none; font-size: 8pt; font-family: Tahoma, Arial, Helvetica, sans-serif; text-align:left; position: absolute; top:5px; left: 680px;
} #calc .cbody .classbar0 .delbtn{height:27px; width:27px; text-align:left; position: absolute; top:2px; left: 5px; background: url(delbtn.jpg);

} #calc .cbody .classbar1{ position: absolute; width: 780px; height: 27px; top:202px; background: url(det_bar.jpg); margin:0;
} #calc .cbody .classbar1 .cname{ color: #000000; height:20px; background: transparent no-repeat; border:none; font-size: 8pt; font-family: Tahoma, Arial, Helvetica, sans-serif; text-align:left; position: absolute; top:5px; left: 35px;
} #calc .cbody .classbar1 .cgrade{ color: #000000; height:20px; background: transparent no-repeat; border:none; font-size: 8pt; font-family: Tahoma, Arial, Helvetica, sans-serif; ext-align:left; position: absolute; top:5px; left: 440px;
} #calc .cbody .classbar1 .ccredit{ color: #000000; height:20px; background: transparent no-repeat; border:none; font-size: 8pt; font-family: Tahoma, Arial, Helvetica, sans-serif; text-align:left; position: absolute; top:5px; left: 520px;
} #calc .cbody .classbar1 .cqualpts{color: #000000; height:20px; background: transparent no-repeat; border:none; font-size: 8pt; font-family: Tahoma, Arial, Helvetica, sans-serif; text-align:left; position: absolute; top:6px; left: 600px;
} #calc .cbody .classbar1 .cgradepts{ color: #FFFFFF; height:20px; background: transparent no-repeat; border:none; font-size: 8pt; font-family: Tahoma, Arial, Helvetica, sans-serif; text-align:left; position: absolute; top:6px; left: 680px;
} #calc .cbody .classbar1 .clevel{color: #000000; height:20px; background: transparent no-repeat; border:none; font-size: 8pt; font-family: Tahoma, Arial, Helvetica, sans-serif; text-align:left; position: absolute; top:5px; left: 340px;
} #calc .cbody .classbar1 select,#calc .cbody .classbar1 select option{color: #000000; background-color:#FFF; height:20px; border:none; font-size: 8pt; font-family: Tahoma, Arial, Helvetica, sans-serif; text-align:left; position: absolute; top:5px; left: 340px;




<div class="classbar<?php echo $i;?>"><input type="image" name="delbtn[<?php echo $det["id"];?>]" src="themes/CCS/delbtn.jpg" value="123" alt="Delete Class" title="Delete Class"><input type="text" name="classname[<?php echo $det["id"];?>]" class="cname" value="<?php echo $det['d_class'];?>" size="30">
<select name="cclasslevel[<?php echo $det["id"];?>]" class="clevel">
<option value="1" class="clevel" <?php if ($det['d_level']==1) echo "selected";?>>College Prep</option>
<option value="2" class="clevel" <?php if ($det['d_level']==2) echo "selected";?>>Honors</option>
<option value="3" class="clevel" <?php if ($det['d_level']==3) echo "selected";?>>AP</option>
</select>
<input type="text" name="cgrade[<?php echo $det["id"];?>]" class="cgrade" value="<?php echo $det['d_grade'];?>" size="9">
<input type="text" name="ccredit[<?php echo $det["id"];?>]" class="ccredit" value="<?php echo $det['d_cred'];?>" size="9">
<div name="qualpts[<?php echo $det["id"];?>]" class="cqualpts"><?php echo $det['d_qp'];?></div>
<div name="cgradepts[<?php echo $det["id"];?>]" class="cgradepts"><?php echo $det['d_gp'];?></div>
</div>
<?php $i++; }

[Nile]

Can you update your page please so I can take a look?

[gpigate]

what part didnt update?

http://outdoorsindoors.net/DEV/GPAW/index.php?page=mods/calc/calc1&subid=1

if you go there, the first row shows good in IE and FF, although IE still has a border. in IE the first row has a bg color but the rest dont.

in FF no border, it has a bg color, the rest dont.

really odd. based on the code, it should be picking up, i must be missing something small.

[gpigate]

actually its picking up on the clevel class

} #calc .cbody .classbar0 .clevel{color: #FFFFFF; background-color:#005fb1; height:20px; border:none; font-size: 8pt;
font-family: Tahoma, Arial, Helvetica, sans-serif; text-align:left; position: absolute; top:5px; left: 340px;

because of


select name="cclasslevel[<?php echo $det["id"];?>]" class="clevel">

when inserting your class definition do I need to remove the class="clevel" and the definition from the css?

I would have to redo the bg image and add the drop down field back in order to see that. do I need to do that for this to work? I would think we would see the change that let me know I would need to do that

[Nile]

Your CSS is hard to read, can you please beautify it (http://www.codebeautifier.com/) before posting it. Try:


border: 0;

You need the class depending on how you want the style, does the class do anything. =\

[gpigate]

here it is all pretty. what do you mean does the class do anything? the clevel class its picking up currently does do something. it adds the light blue background. The original intent was to have a transparent background on the initial select list with an image behind it. then to have the drop down options have a light blue behind them.

I am not sure that will work in IE so I am fine with a normal select list. =/


#calc .cbody .classbar0 {
position:absolute;
width:780px;
height:27px;
top:175px;
background:url(det_bar.jpg);
margin:0;
}

#calc .cbody .classbar0 .cname {
color:#000;
height:20px;
background:transparent no-repeat;
border:none;
font-size:8pt;
font-family:Tahoma, Arial, Helvetica, sans-serif;
text-align:left;
position:absolute;
top:5px;
left:35px;
}

#calc .cbody .classbar0 .cgrade {
color:#000;
height:20px;
background:transparent no-repeat;
border:none;
font-size:8pt;
font-family:Tahoma, Arial, Helvetica, sans-serif;
text-align:left;
position:absolute;
top:5px;
left:440px;
}

#calc .cbody .classbar0 .ccredit {
color:#000;
height:20px;
background:transparent no-repeat;
border:none;
font-size:8pt;
font-family:Tahoma, Arial, Helvetica, sans-serif;
text-align:left;
position:absolute;
top:5px;
left:520px;
}

#calc .cbody .classbar0 .cqualpts {
color:#000;
height:20px;
background:transparent no-repeat;
border:none;
font-size:8pt;
font-family:Tahoma, Arial, Helvetica, sans-serif;
text-align:left;
position:absolute;
top:6px;
left:600px;
}

#calc .cbody .classbar0 .cgradepts {
color:#FFF;
height:20px;
background:transparent no-repeat;
border:none;
font-size:8pt;
font-family:Tahoma, Arial, Helvetica, sans-serif;
text-align:left;
position:absolute;
top:6px;
left:680px;
}

#calc .cbody .classbar0 .clevel {
color:#FFF;
background-color:#005fb1;
height:20px;
border:none;
font-size:8pt;
font-family:Tahoma, Arial, Helvetica, sans-serif;
text-align:left;
position:absolute;
top:5px;
left:340px;
}

#calc .cbody .classbar0 .delbtn {
height:27px;
width:27px;
text-align:left;
position:absolute;
top:2px;
left:5px;
background:url(delbtn.jpg);
}