Response title
This is preview!
Move this topic
how to style jquery Selectmenu component
in Getting Started
•
8 years ago
Hello forum
I want to be able to style selectmenu as follows:
1) selectmenu will for example have 3 colors ( white, red
and black) to choose from.
2) If I select any of these colors, I want the color to show up
on the selectmenu as a square, with the name specific to that
color, for example:
if I choose white:
if I choose red:
if I choose black:
The full dropdown looks like this:
I was able to style it but I can't figure out having that color square show up, I'm new
to jquery ui and I can't find anything on this specifically.
Thank you
1
Replies(2)
Re: how to style jquery Selectmenu component
8 years ago
You didn't post any code or markup so I'm not sure how your list is set
up. Here is one way to do it, you can probably modify this to suit your needs.
You'll want to add some validation to make sure they pick a color,
and whatever other css you need to make it look how you want.
Dave
Dave
Re: Re: how to style jquery Selectmenu component
8 years ago
Thank you for your reply
here is the code I'm testing:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>ziji-media-chromeless-player</title>
<script
src="js/libs/jquery/jquery.js"
type="text/javascript"></script>
<script
src="js/libs/jquery-ui/jquery-ui.js"
type="text/javascript"></script>
<link
rel="stylesheet"
href="css/chromeless-player.css"/>
<script>
$('#option-font-color').selectmenu({
icons: [
{find: '.color-white'},
{find:
'.color-black'},
{find: '.color-red'}
]
});
</script>
</head>
<body>
<div
id="advanced-cc-panel">
<label
for="option-font-color"></label>
<select
name="option-font-color"
id="option-font-color">
<option class="color-white"
value="#ffffff">White</option>
<option
class="select-dash"
disabled="disable">——————————</option>
<option
class="color-black"
value="#000000">Black</option>
<option
class="select-dash"
disabled="disable">——————————</option>
<option
class="color-red"
value="#ff0000">Red</option>
<option
class="select-dash"
disabled="disable">——————————</option>
<option
class="color-green"
value="#008000">Green</option>
<option
class="select-dash"
disabled="disable">——————————</option>
<option
class="color-blue"
value="#0000ff">Blue</option>
<option
class="select-dash"
disabled="disable">——————————</option>
<option
class="color-cyan"
value="#00ffff">Cyan</option>
<option
class="select-dash"
disabled="disable">——————————</option>
<option
class="color-magenta"
value="#ff00ff">Magenta</option>
<option
class="select-dash"
disabled="disable">——————————</option>
<option
class="color-yellow"
value="#ffff00">Yellow</option>
</select>
</div>
</body>
</html>
CSS --------------------------------------------------------------------------------------------
@font-face {
font-family: 'Open Sans Regular';
//src: url('fonts/Open Sans.eot');
src: local('Open Sans Regular'), local('Open Sans'),
url('fonts/Open Sans.ttf') format('truetype');
}
.
body {position: fixed;}
#advanced-cc-panel{
font-family:'Open Sans';
float:right;
width:100%;
border-top:1px solid
#333;
background-color: #000000;
z-index: 2147483650;
margin : 0 auto;
}
select {
background: transparent;
background:
url(../images/arrow.jpg) no-repeat right #252525;
border-style: solid;
border-color: #464646;
border-left: #252525;
border-right: #252525;
border-width: 1px;
width: 200px;
height: 45px;
-webkit-appearance: none;
font-size: large;
color: #cccccc;
padding-left: 30px;
}
option
{
color:black;
border-style: solid;
border-width: 1px;
border-bottom: 1px solid #000000
}
.select-dash {
color: white;
}
.ui-selectmenu-item-icon {
background-size: 16px 16px;}
.color-black .ui-selectmenu-item-icon
{ background: url(../images/black.jpg) 0 0 no-repeat; }
.color-white
.ui-selectmenu-item-icon { background:
url(../images/white.jpg) 0 0 no-repeat; }
.color-red .ui-selectmenu-item-icon
{ background: url(../images/red.jpg) 0 0 no-repeat;
}
.color-green
.ui-selectmenu-item-icon { background:
url(../images/green.jpg) 0 0 no-repeat; }
.color-blue .ui-selectmenu-item-icon {
background: url(../images/blue.jpg) 0 0 no-repeat; }
.color-cyan .ui-selectmenu-item-icon
{ background: url(../images/cyan.jpg) 0 0 no-repeat; }
.color-magenta
.ui-selectmenu-item-icon { background:
url(../images/magenta.jpg) 0 0 no-repeat; }
.color-yellow
.ui-selectmenu-item-icon { background:
url(../images/yellow.jpg) 0 0 no-repeat; }
THIS
IS WHAT IT LOOKS LIKE SO FAR -
I was trying to use the icon approach but that didn't work.
I like your approach better, How can I use it on mine?
Also, How can I hidde the text on the drop down menu, so only the
colors are displayed but when I select the specific color the name
should show up on the main menu bar?
Thank you.
Leave a comment on dsvick's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to zaurion's question