UserVoice Listboxes

Developer
John W. Long
Size
6,978 Kb
Views
26,312
  1. UserVoice Listboxes Previews
  2. UserVoice Listboxes HTML Codes
  3. UserVoice Listboxes CSS Codes
  4. UserVoice Listboxes JS Codes

How do I make an uservoice listboxes?

What is a uservoice listboxes? How do you make a uservoice listboxes? This script and codes were developed by John W. Long on 01 September 2022, Thursday.

UserVoice Listboxes Previews
IQ Test

UserVoice Listboxes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>UserVoice Listboxes</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300italic,400italic,600italic,700italic,800italic,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="h1 light mb3">Listboxes</h1>
<div class="example"> <div class="mb1">Standard</div> <ul class="listbox w20 h30" data-selectbox tabindex="-1"> <li class="listitem"><a class="listitem-target">Apples</a></li> <li class="listitem is-selected"><a class="listitem-target">Oranges</a></li> <li class="listitem"><a class="listitem-target">Bananas</a></li> <li class="listitem"><a class="listitem-target">Grapes</a></li> <li class="listitem"><a class="listitem-target">Pears</a></li> <li class="listitem"><a class="listitem-target">Strawberries</a></li> </ul>
</div>
<div class="example"> <div class="mb1">Badges</div> <ul class="listbox w20 h30" data-selectbox tabindex="-1"> <li class="listitem"><a class="listitem-target">Apples <span class="listitem-badge right">83</span></a></li> <li class="listitem is-selected"><a class="listitem-target">Oranges <span class="listitem-badge right">15</span></a></li> <li class="listitem"><a class="listitem-target">Bananas <span class="listitem-badge right">8</span></a></li> <li class="listitem"><a class="listitem-target">Grapes <span class="listitem-badge right">17</span></a></li> <li class="listitem"><a class="listitem-target">Pears <span class="listitem-badge right">45</span></a></li> <li class="listitem"><a class="listitem-target">Strawberries <span class="listitem-badge right">34</span></a></li> </ul>
</div>
<div class="example"> <div class="mb1">Checkbox list</div> <ul class="listbox w20 h30" tabindex="-1"> <li class="listitem"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox"></span>Apples</label></label></li> <li class="listitem"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox"></span>Oranges</label></li> <li class="listitem"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox"></span>Bananas</label></li> <li class="listitem"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox"></span>Grapes</label></li> <li class="listitem"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox"></span>Pears</label></li> <li class="listitem"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox"></span> Strawberries</label></li> </ul>
</div>
<div class="example"> <div class="mb1">Treeview</div> <ul class="listbox w20 h30" data-selectbox tabindex="-1"> <li> <div class="listitem header-listitem" data-expanded="true"><a class="listitem-target"><span class="listitem-expander is-expanded"></span>Apples</a></div> <ul> <li class="listitem level-1"><a class="listitem-target">Red Delicious</a></li> <li class="listitem level-1"><a class="listitem-target">Granny Smith</a></li> <li class="listitem level-1"><a class="listitem-target">Gala</a></li> </ul> </li> <li> <div class="listitem header-listitem" data-expanded="false"><a class="listitem-target"><span class="listitem-expander is-not-expanded"></span>Oranges</a></div> <ul style="display:none"> <li class="listitem level-1"><a class="listitem-target">Valencia</a></li> <li class="listitem level-1"><a class="listitem-target">Navel</a></li> <li class="listitem level-1"><a class="listitem-target">Blood</a></li> </ul> </li> <li> <div class="listitem header-listitem" data-expanded="false"><a class="listitem-target"><span class="listitem-expander is-not-expanded"></span>Bananas</a></div> <ul style="display:none"> <li class="listitem level-1"><a class="listitem-target">Cavendish</a></li> <li class="listitem level-1"><a class="listitem-target">Baby</a></li> <li class="listitem level-1"><a class="listitem-target">Burro</a></li> <li class="listitem level-1"><a class="listitem-target">Plantain</a></li> <li class="listitem level-1"><a class="listitem-target">Red</a></li> </ul> </li> </ul>
</div>
<div class="example"> <div class="mb1">Treeview with checkboxes</div> <ul class="listbox w20 h30" tabindex="-1"> <li> <div class="listitem"><span class="listitem-expander is-expanded" data-expanded="true"></span><label><span class="listitem-checkbox"><input type="checkbox"></span>Apples</label></div> <ul> <li class="listitem level-2"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox"></span>Red Delicious</label></li> <li class="listitem level-2"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox"></span>Granny Smith</label></li> <li class="listitem level-2"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox"></span>Gala</label></li> </ul> </li> <li> <div class="listitem"><span class="listitem-expander is-not-expanded" data-expanded="true"></span><label><span class="listitem-checkbox"><input type="checkbox" data-indeterminate></span>Oranges</label></div> <ul> <li class="listitem level-2"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox"></span>Valencia</label></li> <li class="listitem level-2"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox" checked></span>Navel</label></li> <li class="listitem level-2"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox" checked></span>Blood</label></li> </ul> </li> <li> <div class="listitem"><span class="listitem-expander is-not-expanded" data-expanded="false"></span><label><span class="listitem-checkbox"><input type="checkbox"></span>Bananas</label></div> <ul style="display:none"> <li class="listitem level-2"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox"></span>Cavendish</label></li> <li class="listitem level-2"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox"></span>Baby</label></li> <li class="listitem level-2"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox"></span>Burro</label></li> <li class="listitem level-2"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox"></span>Plantain</label></li> <li class="listitem level-2"><label class="listitem-target"><span class="listitem-checkbox"><input type="checkbox"></span>Red</label></li> </ul> </li> </ul>
</div>
<div class="example"> <div class="mb1">Advanced example</div> <ul class="listbox h30 w40" data-selectbox tabindex="-1"> <li> <div class="listitem header-listitem" data-expanded="false"><a class="listitem-target"><span class="listitem-expander is-not-expanded"></span>General Feedback <span class="listitem-badge small right">5,040</span></a></div> <ul style="display: none"> <li class="listitem small level-1"><a class="listitem-target" tabindex="-1"><em class="italic">No category</em> <span class="listitem-badge small right">1,583</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Access Controls (SSO/Privacy) <span class="listitem-badge small right">62</span></a></li> <li class="listitem small level-1 is-selected"><a class="listitem-target">Admin Console <span class="listitem-badge small right">567</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Article Insights <span class="listitem-badge small right">24</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Capturing Feedback <span class="listitem-badge small right">52</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Facebook App <span class="listitem-badge small right">87</span></a></li> <li class="listitem small level-1"><a class="listitem-target">End-users - User features <span class="listitem-badge small right">347</span></a></li> <li class="listitem small level-1"><a class="listitem-target">End-users - Web portal (subdomain) <span class="listitem-badge small right">224</span></a></li> <li class="listitem small level-1"><a class="listitem-target">End-users - Widgets <span class="listitem-badge small right">342</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Exports & data portability <span class="listitem-badge small right">36</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Feedback System <span class="listitem-badge small right">280</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Feedback system – Feedback loop <span class="listitem-badge small right">39</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Feedback system – Forums <span class="listitem-badge small right">83</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Feedback system – Managing feedback <span class="listitem-badge small right">80</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Feedback system – Organizing feedback <span class="listitem-badge small right">37</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Feedback system – Reports & Insights</a></li> <li class="listitem small level-1"><a class="listitem-target">Feedback System – Reviewing feedback <span class="listitem-badge small right">16</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Help & Documentation <span class="listitem-badge small right">205</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Integrations <span class="listitem-badge small right">341</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Knowledge Base <span class="listitem-badge small right">254</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Knowledge Base – Managing Articles <span class="listitem-badge small right">3</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Linking tickets to ideas <span class="listitem-badge small right">10</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Localization & Internationalization <span class="listitem-badge small right">20</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Notifications <span class="listitem-badge small right">279</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Pricing <span class="listitem-badge small right">112</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Satisfaction Ratings <span class="listitem-badge small right">43</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Search <span class="listitem-badge small right">55</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Search insights <span class="listitem-badge small right">5</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Settings <span class="listitem-badge small right">134</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Sign-in <span class="listitem-badge small right">158</span></a></li> <li class="listitem small level-1"><a class="listitem-target">SmartVote <span class="listitem-badge small right">3</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Team insights (internal) <span class="listitem-badge small right">14</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Ticket system <span class="listitem-badge small right">550</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Tickets – Canned responses <span class="listitem-badge small right">28</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Tickets – Internal workflows <span class="listitem-badge small right">31</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Tickets – Messages & Notifications <span class="listitem-badge small right">25</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Tickets – Reports & Insights <span class="listitem-badge small right">52</span></a></li> <li class="listitem small level-1"><a class="listitem-target">User insights <span class="listitem-badge small right">33</span></a></li> <li class="listitem small level-1"><a class="listitem-target">User management <span class="listitem-badge small right">137</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Voting <span class="listitem-badge small right">116</span></a></li> <li class="listitem small level-1"><a class="listitem-target">www.uservoice.com <span class="listitem-badge small right">100</span></a></li> </ul> </li> <li> <div class="listitem header-listitem" data-expanded="false"><a class="listitem-target"><span class="listitem-expander is-not-expanded"></span>Developer API <span class="listitem-badge small right">212</span></a></div> <ul style="display: none"> <li class="listitem small level-1"><a class="listitem-target"><em class="italic">No category</em> <span class="listitem-badge right small">212</span></a></li> </ul> </li> <li> <div class="listitem header-listitem" data-expanded="false"><a class="listitem-target"><span class="listitem-expander is-not-expanded"></span>Mobile SDK <span class="listitem-badge small right">51</span></a></div> <ul style="display: none"> <li class="listitem small level-1"><a class="listitem-target"><em class="italic">No category</em></a></li> <li class="listitem small level-1"><a class="listitem-target">All platforms <span class="listitem-badge small right">32</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Android SDK <span class="listitem-badge small right">11</span></a></li> <li class="listitem small level-1"><a class="listitem-target">iOS SDK <span class="listitem-badge small right">20</span></a></li> </ul> </li> <li> <div class="listitem header-listitem" data-expanded="true"><a class="listitem-target"><span class="listitem-expander is-not-expanded"></span>Translation system <span class="listitem-badge small right">55</span></a></div> <ul style="display: none"> <li class="listitem small level-1"><a class="listitem-target"><em class="italic">No category</em></a></li> </ul> </li> <li> <div class="listitem header-listitem" data-expanded="false"><a class="listitem-target"><span class="listitem-expander is-not-expanded"></span>Bugs <span class="listitem-badge small right">253</span></a></div> <ul style="display:none"> <li class="listitem small level-1"><a class="listitem-target"><em class="italic">No category</em></a></li> <li class="listitem small level-1"><a class="listitem-target">Access and Authentication <span class="listitem-badge small right">14</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Admin Console (General) <span class="listitem-badge small right">47</span></a></li> <li class="listitem small level-1"><a class="listitem-target">API <span class="listitem-badge small right">17</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Auto-Prompts, identify and user traits</a></li> <li class="listitem small level-1"><a class="listitem-target">Billing <span class="listitem-badge small right">16</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Documentation <span class="listitem-badge small right">1</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Export <span class="listitem-badge small right">9</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Feedback system <span class="listitem-badge small right">40</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Import <span class="listitem-badge small right">7</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Integrations and service hooks <span class="listitem-badge small right">9</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Knowledge Base <span class="listitem-badge small right">7</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Localization and Translations <span class="listitem-badge small right">9</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Mail deliverability, notifications and invitations <span class="listitem-badge small right">14</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Mobile SDKs <span class="listitem-badge small right">5</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Reports <span class="listitem-badge small right">31</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Search <span class="listitem-badge small right">21</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Security <span class="listitem-badge small right">6</span></a></li> <li class="listitem small level-1"><a class="listitem-target">SEO <span class="listitem-badge small right">2</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Settings <span class="listitem-badge small right">15</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Superadmin <span class="listitem-badge small right">2</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Text editiing and format <span class="listitem-badge small right">3</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Tickets <span class="listitem-badge small right">49</span></a></li> <li class="listitem small level-1"><a class="listitem-target">User Data <span class="listitem-badge small right">2</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Web Portal <span class="listitem-badge small right">26</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Widgets <span class="listitem-badge small right">31</span></a></li> <li class="listitem small level-1"><a class="listitem-target">www.uservoice.com <span class="listitem-badge small right">1</span></a></li> </ul> </li> <li> <div class="listitem header-listitem" data-expanded="true"><a class="listitem-target"><span class="listitem-expander is-not-expanded"></span>Archived suggestions [closed] <span class="listitem-badge small right">17</span></a></div> <ul style="display:none"> <li class="listitem small level-1"><a class="listitem-target"><em class="italic">No category</em></a></li> <li class="listitem small level-1"><a class="listitem-target">Bar Tour <span class="listitem-badge small right">9</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Bugs <span class="listitem-badge small right">34</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Internal Ideas <span class="listitem-badge small right">58</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Legacy Feedback <span class="listitem-badge small right">1</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Mission Statement <span class="listitem-badge small right">18</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Office Ideas <span class="listitem-badge small right">20</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Requested Translations <span class="listitem-badge small right">124</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Sales Issues <span class="listitem-badge small right">9</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Translation Issues <span class="listitem-badge small right">34</span></a></li> </ul> </li> <li> <div class="listitem header-listitem" data-expanded="false"><a class="listitem-target"><span class="listitem-expander is-not-expanded"></span>UserVoice 3.0 <span class="listitem-badge small right">129</span></a></div> <ul style="display:none"> <li class="listitem small level-1"><a class="listitem-target"><em class="italic">No category</em></a></li> <li class="listitem small level-1"><a class="listitem-target">API <span class="listitem-badge small right">2</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Capturing feedback <span class="listitem-badge small right">18</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Employee insights <span class="listitem-badge small right">1</span></a></li> <li class="listitem small level-1"><a class="listitem-target">End-user experience <span class="listitem-badge small right">5</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Feedback / forum index <span class="listitem-badge small right">8</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Filters & Search <span class="listitem-badge small right">9</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Gardening <span class="listitem-badge small right">10</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Integrations <span class="listitem-badge small right">3</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Labels <span class="listitem-badge small right">8</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Navigation <span class="listitem-badge small right">6</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Performance <span class="listitem-badge small right">0</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Personalized Views & Notifications <span class="listitem-badge small right">5</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Settings <span class="listitem-badge small right">6</span></a></li> <li class="listitem small level-1"><a class="listitem-target">SmartVote <span class="listitem-badge small right">8</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Suggestion detail <span class="listitem-badge small right">16</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Suggestion index <span class="listitem-badge small right">13</span></a></li> <li class="listitem small level-1"><a class="listitem-target">Tickets UI <span class="listitem-badge small right">4</span></a></li> <li class="listitem small level-1"><a class="listitem-target">User insights <span class="listitem-badge small right">13</span></a></li> </ul> </li> <li> <div class="listitem header-listitem" data-expanded="false"><a class="listitem-target"><span class="listitem-expander is-not-expanded"></span>Use Cases & Sentiment <span class="listitem-badge small right">72</span></a></div> <ul style="display:none"> <li class="listitem small level-1"><a class="listitem-target"><em class="italic">No category</em></a></li> <li class="listitem small level-1"><a class="listitem-target">Account & Plan Managment <span class="listitem-badge small right">6</span></a></li> <li class="listitem small level-1"><a class="listitem-target">End-user experiences <span class="listitem-badge small right">11</span></a></li> <li class="listitem small level-1"><a class="listitem-target">UserVoice (PM platform) <span class="listitem-badge small right">21</span></a></li> <li class="listitem small level-1"><a class="listitem-target">UserVoice Helpdesk <span class="listitem-badge small right">8</span></a></li> </ul> </li> <li> <div class="listitem header-listitem" data-expanded="false"><a class="listitem-target"><span class="listitem-expander is-not-expanded"></span>Private beta feedback (for smaller projects) <span class="listitem-badge small right">19</span></a></div> <ul style="display:none"> <li class="listitem small level-1"><a class="listitem-target"><em class="italic">No category</em></a></li> <li class="listitem small level-1"><a class="listitem-target">Multi-lang articles <span class="listitem-badge small right">13</span></a></li> </ul> </li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

UserVoice Listboxes - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
body { font-family: "Proxima Nova", "Open Sans", sans-serif; font-weight: 400; font-size: 14px; padding: 50px;
}
.h10 { height: 100px !important;
}
.h20 { height: 200px !important;
}
.h30 { height: 300px !important;
}
.h40 { height: 400px !important;
}
.h50 { height: 500px !important;
}
.w10 { width: 100px !important;
}
.w20 { width: 200px !important;
}
.w30 { width: 300px !important;
}
.w40 { width: 400px !important;
}
.w50 { width: 500px !important;
}
.block { display: block !important;
}
.mb1 { margin-bottom: 10px !important;
}
.mb2 { margin-bottom: 20px !important;
}
.mb3 { margin-bottom: 30px !important;
}
.h1 { font-size: 28px !important;
}
.light { font-weight: 300 !important;
}
.italic { font-style: italic !important;
}
.example { float: left; margin-right: 30px; margin-bottom: 30px;
}
.listbox { display: inline-block; background-color: white; border: 1px solid #a0abb6; border-top: 1px solid #98a3af; border-bottom: 1px solid #bdc4cc; border-radius: 2px; min-width: 120px; vertical-align: top; overflow: auto;
}
.listbox:focus { border-color: #2f85d8; box-shadow: rgba(0, 109, 223, 0.15) 0 1px 1px inset, rgba(255, 255, 255, 0.5) 0 0 0 1px, #006ddf 0 0 4px 1px; color: black; outline: none;
}
.listbox.full-width { display: block;
}
.listitem { display: block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; white-space: nowrap; font-size: 14px; line-height: 1.2; padding: 5px 8px 4px 8px;
}
.listitem.small { font-size: 12px;
}
.listitem.level-1 { padding: 5px 8px 4px 28px;
}
.listitem.level-2 { padding: 5px 8px 4px 48px;
}
.listitem.level-3 { padding: 5px 8px 4px 68px;
}
.listitem.level-4 { padding: 5px 8px 4px 88px;
}
.listitem.level-5 { padding: 5px 8px 4px 108px;
}
.listitem.level-6 { padding: 5px 8px 4px 128px;
}
.header-listitem { background: #f2f4f7; background-clip: padding-box; border-bottom: 1px solid transparent;
}
.listitem-target { display: block; color: #2e2f33; cursor: pointer; display: block; margin: -5px -8px -4px -8px; padding: 5px 8px 4px 8px; position: relative; text-decoration: none; border-top: 1px solid transparent; border-bottom: 1px solid transparent;
}
.listitem-target:focus { outline: none;
}
.listitem-target:hover { background-color: #ddecfc;
}
.listitem.is-selected .listitem-target { color: white; background-color: #0099e4;
}
.listitem.level-1 .listitem-target { margin: -5px -8px -4px -28px; padding: 5px 8px 4px 28px;
}
.listitem.level-2 .listitem-target { margin: -5px -8px -4px -48px; padding: 5px 8px 4px 48px;
}
.listitem.level-3 .listitem-target { margin: -5px -8px -4px -68px; padding: 5px 8px 4px 68px;
}
.listitem.level-4 .listitem-target { margin: -5px -8px -4px -88px; padding: 5px 8px 4px 88px;
}
.listitem.level-5 .listitem-target { margin: -5px -8px -4px -108px; padding: 5px 8px 4px 108px;
}
.listitem.level-6 .listitem-target { margin: -5px -8px -4px -128px; padding: 5px 8px 4px 128px;
}
.listitem-expander { display: inline-block; width: 20px; text-align: center; cursor: pointer; height: 18px; margin-bottom: -18px;
}
.listitem-expander.is-expanded:before { display: inline-block; content: ""; border: 5px solid transparent; border-top-color: #5c5f66; border-bottom: none; width: 9px; height: 5px; vertical-align: baseline; margin-bottom: 1px; margin-right: 4px;
}
.listitem.is-selected .listitem-expander.is-expanded:before { border-top-color: white;
}
.listitem-expander.is-not-expanded:before { display: inline-block; content: ""; border: 5px solid transparent; border-left-color: #5c5f66; border-right: none; width: 5px; height: 9px; vertical-align: baseline; margin-bottom: -1px; margin-left: 1px; margin-right: 4px;
}
.listitem.is-selected .listitem-expander.is-not-expanded:before { border-left-color: white;
}
.listitem-checkbox { display: inline-block; width: 20px; text-align: center; height: 18px; margin-bottom: -18px;
}
.listitem-checkbox input[type=checkbox] { margin-left: -2px;
}
.listitem-badge { display: inline-block; background-color: #e3e8f2; border-radius: 9px; padding: 2px 6px 1px; margin: -2px 0 -2px 4px; min-width: 20px; text-align: center; vertical-align: baseline; font-weight: 200;
}
.listitem-badge.small { font-size: 12px; margin-top: -1px;
}
.listitem.small .listitem-badge.small { margin-top: -2px;
}
.listitem-badge.right { position: absolute; top: 5px; right: 6px;
}
.header-listitem .listitem-badge { background-color: #dfe3ec;
}
.listitem:hover .listitem-badge { background-color: #bbd7fa !important;
}
.listitem.is-selected .listitem-badge { background-color: #72c1eb !important;
}

UserVoice Listboxes - Script Codes JS Codes

$(document.body).on('click', '[data-selectbox] .listitem', function() { var item = $(this); item.parents('.listbox').find('.is-selected').removeClass('is-selected'); item.addClass('is-selected');
});
$(document.body).on('click', '[data-expanded=true]', function() { var item = $(this); item.attr('data-expanded', 'false'); item.removeClass('is-expanded').addClass('is-not-expanded'); item.find('.listitem-expander').removeClass('is-expanded').addClass('is-not-expanded'); item.parents('li').find('ul').hide();
});
$(document.body).on('click', '[data-expanded=false]', function() { var item = $(this); item.attr('data-expanded', 'true'); item.removeClass('is-not-expanded').addClass('is-expanded'); item.find('.listitem-expander').removeClass('is-not-expanded').addClass('is-expanded'); item.parents('li').find('ul').show();
});
$('[data-indeterminate]').prop('indeterminate', true)
UserVoice Listboxes - Script Codes
UserVoice Listboxes - Script Codes
Home Page Home
Developer John W. Long
Username jlong
Uploaded September 01, 2022
Rating 3
Size 6,978 Kb
Views 26,312
Do you need developer help for UserVoice Listboxes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John W. Long (jlong) Script Codes
Name
March of the Smilies
Simple menu 1
Simple menu
Animated CSS Spinner
Modular Form Styles
Animated CSS Throbber
Sass Radar
Modular Typography
Animated CSS Google Plus-Like Loader
Animated CSS Ball Loader
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!