rarebit Posted January 3, 2009 Share Posted January 3, 2009 Hi, I'm after putting a colour swatch within a combo, but it's eluding me. I can change the individual colours of the text, add images, but not a little swatch. <select name='bg_col'> <option value='#3cb878' selected><div style='width:5px;height:5px;background-color:#3cb878;'>X</div>#3cb878</option> <option value='#4b0049'><div style='width:5px; height:5px; background-color:#4b0049;'>X</div>#4b0049</option> <option value='#000000'><div style='width:5px; height:5px; background-color:#000000;'>X</div>#000000</option> <option value='#ffffff'><div style='width:5px; height:5px; background-color:#ffffff;'>X</div>#ffffff</option> </select> Cheers for any solutions... Quote Link to comment Share on other sites More sharing options...
bubbasheeko Posted January 3, 2009 Share Posted January 3, 2009 Hi rarebit, You can apply it to the whole "row" just not the letter X. You would incorporate the swatch via an id or class tag on the option tag. Quote Link to comment Share on other sites More sharing options...
rarebit Posted January 3, 2009 Author Share Posted January 3, 2009 I'm not wanting to do the whole row because i'd then have to arrange a contrasting colour for the text to be prominent. Also when I said swatch I was not inferring the full background just a small portion to the side of the text. Cheers Quote Link to comment Share on other sites More sharing options...
DamienRoche Posted January 4, 2009 Share Posted January 4, 2009 background:#fff; will suffice - you don't need to use background-color. From what I know you are not getting any results because you are limited by the select and option tags. You're not able to style certain elements or elements within certain elements. The only way around it is to have the swatches external of the option tags. Hope that helps. Quote Link to comment Share on other sites More sharing options...
bubbasheeko Posted January 4, 2009 Share Posted January 4, 2009 I agree, if you use Dreamweaver it does not color the div tag as being valid when it is contained with an option tag. Quote Link to comment Share on other sites More sharing options...
rarebit Posted January 4, 2009 Author Share Posted January 4, 2009 Yep, i'm getting defeated, tried spans, fonts, divs, the lot... i'll see if I think of a fresh approach tomorrow... Cheers! Quote Link to comment Share on other sites More sharing options...
bubbasheeko Posted January 4, 2009 Share Posted January 4, 2009 Ya sorry I couldn't give you any more help than that Maybe I will find something relevant tonight. Quote Link to comment Share on other sites More sharing options...
dropfaith Posted January 4, 2009 Share Posted January 4, 2009 you could do some js and have a small image change when hovering links or onclick id look into that cuase option css sucks Quote Link to comment Share on other sites More sharing options...
rarebit Posted January 4, 2009 Author Share Posted January 4, 2009 I always need a non js method first! Quote Link to comment Share on other sites More sharing options...
bubbasheeko Posted January 4, 2009 Share Posted January 4, 2009 Hey rarebit I did have a thought about what you are trying to attempt. I haven't tested it myself yet...but here we go. You know if the small bit of text on the left was the same size you could create a background image for each option and utilize a class or id on the option tag while still accomplishing what you want. Downside: If the width varies...well you get the picture. So something like this can still work: .option1 { background-image: images/image1.jpg; other css } .option2 { background-image: images/image2.jpg; other css } .... <select> <option class="option1">Test 1</option> <option class="option2">Test 2</option> </select> Quote Link to comment Share on other sites More sharing options...
rarebit Posted January 4, 2009 Author Share Posted January 4, 2009 I can already do images. I have a single class and then use inline styles to override the image. Cheers though! Quote Link to comment Share on other sites More sharing options...
bubbasheeko Posted January 4, 2009 Share Posted January 4, 2009 Hey...I'm trying lol Then again I thought I would be sleeping by now...damn over active brain Quote Link to comment Share on other sites More sharing options...
rarebit Posted January 4, 2009 Author Share Posted January 4, 2009 me too, just twittering away... Quote Link to comment Share on other sites More sharing options...
bubbasheeko Posted January 5, 2009 Share Posted January 5, 2009 Back at it I see...I never did find anything else that could help I really tried. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.