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
Post a Comment