javascript - How Would I Style Dynamically Created jQuery UI elements using CSS3? -


i don't know how explain this, want apply different color styles dynamically created jquery ui buttons. think :nth-child(x) or nth-of-type(x) help, neither has worked yet. putting them in right order, or there else help?

my js:

var listcontent = '<div id="playerpicker">'; $(xml).find('character').each(function () { listcontent += '<input type="radio" id="rb_' + $(this).attr('first') +     $(this).attr('last') + '" name="player" class="ui-button-text"     style="background-color: transparent;"><label for="rb_' +     $(this).attr('first') + $(this).attr('last') + '">' + $(this).attr('title')     + ' ' + $(this).attr('first') + ' ' + $(this).attr('middle').charat(0) + '.     ' + $(this).attr('last') + '</label>'; }); listcontent += '</div>'; $('#wrapper').html(listcontent); $('#playerpicker').buttonset(); 

my css:

#playerpicker .ui-button-text {     background: #ff3d3d;     background: -moz-linear-gradient(top, hsl(240,100%,62%) 1%, hsl(240,100%,15%) 48%, hsl(240,100%,62%) 49%, hsl(240,100%,15%) 68%, hsl(240,100%,50%) 95%, hsl(240,97%,24%) 100%);     background: -webkit-linear-gradient(top, hsl(240,100%,62%) 1%,hsl(240,100%,15%) 48%,hsl(240,100%,62%) 49%,hsl(240,100%,15%) 68%,hsl(240,100%,50%) 95%,hsl(240,97%,24%) 100%);     background: linear-gradient(to bottom, hsl(240,100%,62%) 1%,hsl(240,100%,15%) 48%,hsl(240,100%,62%) 49%,hsl(240,100%,15%) 68%,hsl(240,100%,50%) 95%,hsl(240,97%,24%) 100%);     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#ff3d3d', endcolorstr='#780202',gradienttype=0 );     text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;     color: white;     border-radius: 99px;     font-size: 14pt; }  #playerpicker:nth-child(2) .ui-button-text {     background: #ff3d3d;     background: -moz-linear-gradient(top, hsl(330,100%,62%) 1%, hsl(330,100%,15%) 48%, hsl(330,100%,62%) 49%, hsl(330,100%,15%) 68%, hsl(330,100%,50%) 95%, hsl(330,97%,24%) 100%);     background: -webkit-linear-gradient(top, hsl(330,100%,62%) 1%,hsl(330,100%,15%) 48%,hsl(330,100%,62%) 49%,hsl(330,100%,15%) 68%,hsl(330,100%,50%) 95%,hsl(330,97%,24%) 100%);     background: linear-gradient(to bottom, hsl(330,100%,62%) 1%,hsl(330,100%,15%) 48%,hsl(330,100%,62%) 49%,hsl(330,100%,15%) 68%,hsl(330,100%,50%) 95%,hsl(330,97%,24%) 100%);     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#ff3d3d', endcolorstr='#780202',gradienttype=0 );     text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;     color: white;     border-radius: 99px; } 

update: here's fiddle, @jmargolisvt. js has been simplified, css same.

inspect html created javascript , can see need styling set on label tag.

#playerpicker .ui-button-text label {...} , #playerpicker .ui-button-text:checked label {...} 

Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

python - pip wont install .WHL files -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -