vbcoach Posted July 31, 2011 Share Posted July 31, 2011 How to color individual words of text inside drop-down menu? A question if you don't mind about coloring text in PHP output - this time inside of a drop-down menu. Do you know if it is possible to color code a single word or words of text in a drop-down menu? For example I have a list of shirt colors and sizes and would like to make the color of the t-shirt text be that color. For example Women's BLUE large - I would like the word "Blue" be in the color Blue if possible. Do you know if this is possible? If so, do you have an example of code that would work? I find codes that change the entire drop-down menu, but not individual words. Thanks in advance. Quote Link to comment https://forums.phpfreaks.com/topic/243389-how-to-color-a-specific-word-in-text-of-drop-down-menu/ Share on other sites More sharing options...
voip03 Posted July 31, 2011 Share Posted July 31, 2011 try jQuery Quote Link to comment https://forums.phpfreaks.com/topic/243389-how-to-color-a-specific-word-in-text-of-drop-down-menu/#findComment-1249823 Share on other sites More sharing options...
wildteen88 Posted July 31, 2011 Share Posted July 31, 2011 try jQuery Why? You'd use CSS for this. You wont be able to color certain parts of text within the <option></option> tags. Example CSS <select> <option value="large blue" style="color: blue">Large Blue T-shirt</option> <option value="large blue" style="color: Green">Small Green T-shirt</option> </select> I'll move this to CSS help Quote Link to comment https://forums.phpfreaks.com/topic/243389-how-to-color-a-specific-word-in-text-of-drop-down-menu/#findComment-1249824 Share on other sites More sharing options...
vbcoach Posted July 31, 2011 Author Share Posted July 31, 2011 WAIT! Please read my post. Don't move! I asked about color coding a specific word INSIDE of a menu, not the entire menu. I already know how to do that, and I wrote in my initial posting! Quote Link to comment https://forums.phpfreaks.com/topic/243389-how-to-color-a-specific-word-in-text-of-drop-down-menu/#findComment-1249827 Share on other sites More sharing options...
wildteen88 Posted July 31, 2011 Share Posted July 31, 2011 WAIT! Please read my post. Don't move! I asked about color coding a specific word INSIDE of a menu, not the entire menu. I already know how to do that, and I wrote in my initial posting! You can't colour individual words within <option></option> tags, Quote Link to comment https://forums.phpfreaks.com/topic/243389-how-to-color-a-specific-word-in-text-of-drop-down-menu/#findComment-1249830 Share on other sites More sharing options...
vbcoach Posted July 31, 2011 Author Share Posted July 31, 2011 JQuery? Sounds interesting. Thanks for the tip. I will try that. Quote Link to comment https://forums.phpfreaks.com/topic/243389-how-to-color-a-specific-word-in-text-of-drop-down-menu/#findComment-1249835 Share on other sites More sharing options...
teynon Posted July 31, 2011 Share Posted July 31, 2011 I have spent the better part of an hour making a dynamic drop down box that is entirely customizable for you. Here is the code. I highly suggest you look at the code and see how it works before posting a question. <html> <head> <style> .select { border: 1px solid #000000; width: 200px; } .select div { display: none; } .selectH { border: 1px solid #555555; width: 200px; } .selectH div { display: block; } .select .show { display: block; } </style> <script> function selectBox(node) { var a = 0; var divs = new Array(); if (node.className == 'select') { node.className = 'selectH'; } else { node.className = 'select'; } for (i in node.childNodes) { //alert(node.childNodes(i).nodeName); if (node.childNodes(i) != undefined) { if (node.childNodes(i).nodeName == "DIV") { divs[a]=i; a++; html=node.childNodes(i).innerHTML; //alert(html); node.childNodes(i).setAttribute('onclick', 'selectDrop("'+node.id+'", "'+html+'")'); //node.childNodes(i).onclick = function() { alert(html); }; } } } } function selectDrop(objId, selectName) { // Create Form Element if it doesnt exist if (document.getElementById(objId+'input') == null) { document.getElementById(objId).innerHTML=document.getElementById(objId).innerHTML+"<input type='hidden' id='"+objId+"input' name='"+objId+"' value='"+selectName+"'>"; } else { document.getElementById(objId+'input').value = selectName; } } </script> </head> <body> <div class="select" id="product" onClick="selectBox(this);">Choose Product <div>Hats</div> <div>Shirts</div> <div>Pants</div> </div> </body> </html> You can see an example of this at http://www.thomaseynon.com/dropdown.html For everyone else: Can you test compatibility? UPDATE: This mimics a select statement a little better: <html> <head> <style> .select { border: 1px solid #000000; width: 200px; } .select div { display: none; } .selectH { border: 1px solid #555555; width: 200px; } .selectH div { display: block; } .select .show { display: block; } </style> <script> function selectBox(node) { var a = 0; var divs = new Array(); if (node.className == 'select') { node.className = 'selectH'; } else { node.className = 'select'; } for (i in node.childNodes) { //alert(node.childNodes(i).nodeName); if (node.childNodes(i) != undefined) { if (node.childNodes(i).nodeName == "DIV") { divs[a]=i; a++; html=node.childNodes(i).innerHTML; //alert(html); node.childNodes(i).setAttribute('onclick', 'selectDrop("'+node.id+'", "'+html+'")'); //node.childNodes(i).onclick = function() { alert(html); }; } } } } function selectDrop(objId, selectName) { // Create Form Element if it doesnt exist if (document.getElementById(objId+'input') == null) { document.getElementById(objId).innerHTML=document.getElementById(objId).innerHTML+"<input type='hidden' id='"+objId+"input' name='"+objId+"' value='"+selectName+"'>"; } else { document.getElementById(objId+'input').value = selectName; } var parent = document.getElementById(objId); for (i in parent.childNodes) { if (parent.childNodes(i) != undefined) { if (parent.childNodes(i).nodeName == "SPAN") { parent.childNodes(i).innerHTML = selectName; } } } } </script> </head> <body> <div class="select" id="product" onClick="selectBox(this);"><span>Choose Product</span> <div>Hats</div> <div>Shirts</div> <div>Pants</div> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/243389-how-to-color-a-specific-word-in-text-of-drop-down-menu/#findComment-1249845 Share on other sites More sharing options...
teynon Posted July 31, 2011 Share Posted July 31, 2011 I've been obsessing over making this more usable and have improved it further. The example has been updated as well. Example: http://www.thomaseynon.com/dropdown.html You can download this dropdown example here: http://www.thomaseynon.com/dropdown.zip Quote Link to comment https://forums.phpfreaks.com/topic/243389-how-to-color-a-specific-word-in-text-of-drop-down-menu/#findComment-1249859 Share on other sites More sharing options...
teynon Posted July 31, 2011 Share Posted July 31, 2011 Sigh... Sorry for the reposts... :/ I've fixed the above code to work in IE, Firefox, and Chrome. All files have been updated: Example: http://www.thomaseynon.com/dropdown.html Download: http://www.thomaseynon.com/dropdown.zip To create a select box using this code all you have to do is this: <div class="select" id="MyInputName"> <div>Hats</div> <div>Shirts</div> <div>Pants</div> </div> Quote Link to comment https://forums.phpfreaks.com/topic/243389-how-to-color-a-specific-word-in-text-of-drop-down-menu/#findComment-1249878 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.