Home html Styling & lt; select & gt; and & lt; option & gt;

Styling & lt; select & gt; and & lt; option & gt;

Author

Fil Ka

Date

Category

html

How do I style a dropdown list? 

. select {
  background: url (images / select.png) no-repeat transparent;
  background-position: 95% 50%;
  border-radius: 5px;
  margin-right: 2%;
  margin-bottom: 20px;
  width: 220px;
  height: 30px;
}
.select & gt; select: active,
.select & gt; select: focus {
  background: url (images / selectactive.png) no-repeat transparent;
}
select & gt; option {
  background-color: transparent;
  border: 0;
  background-image: url (images / option.png);
  padding-right: 15px;
  height: 31px;
  width: 220px;
}
select & gt; option: nth-child (1) {
  background-image: url (images / option1.png);
}
select & gt; option: nth-last-child {
  background-image: url (images / optionlast.png);
}
.select & gt; select {
  width: 100%;
  color: black;
  font-size: 14px;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  line-height: 2.5;
  background: transparent;
  border: 0;
  overflow: hidden;
  -webkit-appearance: none;
  -moz-appearance: none;
} 
& lt; script src = "https://ajax.googleapis.com/ajax/libs /jquery/1.10.2/jquery.min.js"></script>
& lt; div class = "select" & gt;
 & lt; select & gt;
  & lt; option & gt;
   Language of communication & lt; / option & gt;
  & lt; option & gt; English & lt; / option & gt;
  & lt; option & gt; Spanish & lt; / option & gt;
 & lt; / select & gt;
& lt; / div & gt;

Answer 1, authority 100%

In fact, you can only style with CSS. With some restrictions, and yet. To do this, you need to hide the select inside the div , and style the div itself. 

* {
 color: # 6C7231;
 font-family: Helvetica;
 font-weight: bold;
}
#content {
 width: 300px;
 margin: 20px auto;
 padding: 10px;
 border: 1px dotted gray;
}
.select-wrapper {
 position: relative;
 width: 300px;
 margin: 20px 0;
 border: 1px solid # 6C7231;
 border-radius: 3px;
}
.select-wrapper: hover {
 box-shadow: 0px 0px 3px gray;
}
.select-wrapper select {
 width: 300px;
 height: 28px;
 padding: 0 20px 0 7px;
 background: transparent;
 border: 0;
 appearance: none; / * remove arrow * /
 -webkit-appearance: none; / * remove arrow Chrome * /
 -moz-appearance: none; / * remove arrow FF * /
}
.select-wrapper select :: - ms-expand {
  display: none; / * remove arrow IE * /
}
/ *
 * Style # 1
 * todo: try to change arrow DIV to pseudo: after
* /
.select-arrow-1 {
 position: absolute;
 z-index: -9999;
 right: 4px;
 bottom: 5px;
 border: 8px solid;
 border-color: white white # 6C7231 white;
 border-right: 0;
}
/ * Style # 2 * /
.select-arrow-2 {
 width: 8px;
 height: 0px;
 background: # 6C7231;
 position: absolute;
 z-index: -9999;
 right: 6px;
 top: 14px;
}
.select-arrow-2: before {
 content: '';
 position: absolute;
 top: -6px;
 border: 4px solid transparent;
 border-bottom-color: # 6C7231;
 border-top: 0;
}
.select-arrow-2: after {
 content: '';
 position: absolute;
 top: 1px;
 border: 4px solid transparent;
border-top-color: # 6C7231;
 border-bottom: 0;
}
/ * Style # 3 * /
.select-arrow-3 {
 position: absolute;
 z-index: -9999;
 border: 8px solid transparent;
 border-bottom: 0;
 right: 6px;
}
.select-arrow-3: nth-child (1) {
 top: 11px;
 border-top-color: # 6C7231;
}
.select-arrow-3: nth-child (2) {
 top: 8px;
 border-top-color: #FFF;
} 
& lt; div id = "content" & gt;
 & lt; div class = "select-wrapper" & gt;
  & lt; select & gt;
   & lt; option & gt; Test & lt; / option & gt;
   & lt; option & gt; Test & lt; / option & gt;
   & lt; option & gt; Test & lt; / option & gt;
  & lt; / select & gt;
  & lt; div class = "select-arrow-1" & gt; & lt; / div & gt;
 & lt; / div & gt;
 & lt; div class = "select-wrapper" & gt;
  & lt; div class = "select-arrow-2" & gt; & lt; / div & gt;
  & lt; select & gt;
   & lt; option & gt; Test & lt; / option & gt;
   & lt; option & gt; Test & lt; / option & gt;
   & lt; option & gt; Test & lt; / option & gt;
  & lt; / select & gt;
 & lt; / div & gt;
 & lt; div class = "select-wrapper" & gt;
  & lt; div class = "select-arrow-3" & gt; & lt; / div & gt;
  & lt; div class = "select-arrow-3" & gt; & lt; / div & gt;
  & lt; select & gt;
   & lt; option & gt; Test & lt; / option & gt;
   & lt; option & gt; Test & lt; / option & gt;
   & lt; option & gt; Test & lt; / option & gt;
  & lt; / select & gt;
 & lt; / div & gt;
& lt; / div & gt;

Answer 2, authority 100%

Here’s an example using HTML5 CSS3 and jQuery .
The general idea is that jQuery checks our select element and draws a piece of HTML code below it. 

$ (document) .ready (function () {
// The select element that will be replaced:
 var select = $ ('select.makeMeFancy');
 var selectBoxContainer = $ ('& lt; div & gt;', {
  width: select.outerWidth (),
  className: 'tzSelect',
  html: '& lt; div class = "selectBox" & gt; & lt; / div & gt;'
 });
 var dropDown = $ ('& lt; ul & gt;', {
  className: 'dropDown'
 });
 var selectBox = selectBoxContainer.find ('. selectBox');
 // Loop over the original select element
 select.find ('option'). each (function (i) {
  var option = $ (this);
  if (i == select.attr ('selectedIndex')) {
   selectBox.html (option.text ());
  }
  // Since jQuery 1.4.3 is used, we can access
  // to HTML5 data attributes using the data () method.
  if (option.data ('skip')) {
   return true;
  }
  // Create a dropdown according to
  // with data icon and HTML5 data attributes:
  var li = $ ('& lt; li & gt;', {
   html: '& lt; img src = "' + option.data ('icon') + '" / & gt; & lt; span & gt;' +
    option.data ('html-text') + '& lt; / span & gt;'
  });
  li.click (function () {
   selectBox.html (option.text ());
   dropDown.trigger ('hide');
   // When the click event occurs, we also reflect
   // changes to the original select element:
   select.val (option.val ());
   return false;
  });
  dropDown.append (li);
 });
 selectBoxContainer.append (dropDown.hide ());
 select.hide (). after (selectBoxContainer);
 // Bind custom show and hide events to the dropDown element:
 dropDown.bind ('show', function () {
  if (dropDown.is (': animated')) {
   return false;
  }
  selectBox.addClass ('expanded');
  dropDown.slideDown ();
 }). bind ('hide', function () {
  if (dropDown.is (': animated')) {
   return false;
  }
  selectBox.removeClass ('expanded');
  dropDown.slideUp ();
 }). bind ('toggle', function () {
if (selectBox.hasClass ('expanded')) {
   dropDown.trigger ('hide');
  } else dropDown.trigger ('show');
 });
 selectBox.click (function () {
  dropDown.trigger ('toggle');
  return false;
 });
 // If you click the mouse anywhere on the page while the dropDown element is open,
 // it will be hidden:
 $ (document) .click (function () {
  dropDown.trigger ('hide');
 });
}); 
# page {
 width: 490px;
 margin: 50px auto;
}
#page h1 {
 font-weight: normal;
 text-indent: -99999px;
 overflow: hidden;
 background: url ('../ img / your_product.png') no-repeat;
 width: 490px;
 height: 36px;
}
#page form {
 margin: 20px auto;
 width: 460px;
}
.tzSelect {
 / * Perk select * /
 height: 34px;
 display: inline-block;
 min-width: 460px;
 position: relative;
 / * In the morning ยป
 background: url ("../ img / dropdown_slice.png") no-repeat -99999px;
}
.tzSelect .selectBox {
 position: absolute;
 height: 100%;
 width: 100%;
 / * Quick and easy * /
 font: 13px / 34px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 text-align: center;
 text-shadow: 1px 1px 0 #EEEEEE;
 color: # 666666;
 / * End-to-end CSS3 * /
 background: url ('../ img / select_slice.png') repeat-x #ddd;
 background-image: url ('../ img / select_slice.png'), url ('../ img / select_slice.png'), url ('../ img / select_slice.png'), url ('. ./img/select_slice.png ');
 background-position: 0 -136px, right -204px, 50% -68px, 0 0;
 background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
 cursor: pointer;
 -moz-border-radius: 3px;
-webkit-border-radius: 3px;
 border-radius: 3px;
}
.tzSelect .selectBox: hover,
.tzSelect .selectBox.expanded {
 background-position: 0 -170px, right -238px, 50% -102px, 0 -34px;
 color: # 2c5667;
 text-shadow: 1px 1px 0 # 9bc2d0;
}
.tzSelect .dropDown {
 position: absolute;
 top: 40px;
 left: 0;
 width: 100%;
 border: 1px solid # 32333b;
 border-width: 0 1px 1px;
 list-style: none;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 -moz-box-shadow: 0 0 4px # 111;
 -webkit-box-shadow: 0 0 4px # 111;
 box-shadow: 0 0 4px # 111;
}
.tzSelect li {
 height: 85px;
 cursor: pointer;
 position: relative;
 / * End-to-end CSS3 * /
 background: url ('../ img / dropdown_slice.png') repeat-x # 222;
 background-image: url ('../ img / dropdown_slice.png'), url ('../ img / dropdown_slice.png'), url ('../ img / dropdown_slice.png');
 background-position: 50% -171px, 0 -85px, 0 0;
 background-repeat: no-repeat, no-repeat, repeat-x;
}
.tzSelect li: hover {
 background-position: 50% -256px, 0 -85px, 0 0;
}
.tzSelect li span {
 left: 88px;
 position: absolute;
 top: 27px;
}
.tzSelect li i {
 color: # 999999;
 display: block;
 font-size: 12px;
}
.tzSelect li img {
 left: 9px;
 position: absolute;
 top: 13px;
}
/ * In the middle * /
#footer {
 background-color: # 212121;
 position: fixed;
 width: 100%;
 height: 70px;
 bottom: 0;
 left: 0;
}
.tri {
 border-color: transparent transparent # 212121;
 border-style: solid;
 border-width: 20px 17px;
 height: 0;
 left: 50%;
 margin: -40px 0 0 -400px;
 position: absolute;
 top: 0;
 width: 0;
}
#footer h1 {
 font-size: 20px;
 font-weight: normal;
 left: 50%;
 margin-left: -400px;
 padding: 25px 0;
 position: absolute;
 width: 600px;
}
a,
a: visited {
 text-decoration: none;
 outline: none;
 border-bottom: 1px dotted # 97cae6;
 color: # 97cae6;
}
a: hover {
 border-bottom: 1px dashed transparent;
}
.clear {
 clear: both;
} 
& lt; script src = "https://ajax.googleapis.com/ajax/libs /jquery/1.4.3/jquery.min.js"></script>
& lt; div id = "page" & gt;
 & lt; h1 & gt; Your product & lt; / h1 & gt;
 & lt; form method = "post" action = "" & gt;
  & lt;! - We're going to use jQuery to hide the select element and replace it - & gt;
  & lt; select name = "fancySelect" class = "makeMeFancy" & gt;
   & lt;! - Pay attention to HTML5 data attributes - & gt;
   & lt; option value = "0" selected = "selected" data-skip = "1" & gt; Select product & lt; / option & gt;
   & lt; option value = "1" data-icon = "http://ruseller.com/lessons/les805/demo/img/products/js.png" data-html-text = "JavaScript + jQuery for beginners in video & amp; lt; i & amp; gt; watch a video presentation & amp; lt; / i & amp; gt; "& gt; JavaScript + jQuery for beginners in video & lt; / option & gt;
   & lt; option value = "2" data-icon = "http://ruseller.com/lessons/les805/demo/img/products/php.png" data-html-text = "PHP + MySQL for Beginners & amp; lt; i & amp; gt; buy & amp; lt; / i & amp; gt; "& gt; PHP + MySQL for beginners & lt; / option & gt;
   & lt; option value = "3" data-icon = "http://ruseller.com/lessons/les805/demo/img/products/wp.png" data-html-text = "WordPress - a professional blog in one day & amp; lt; i & amp; gt; download & amp; lt; / i & amp; gt; "& gt; WordPress - professional blog in one day & lt; / option & gt;
   & lt; option value = "4" data-icon = "http://ruseller.com/lessons/les805/demo/img/products/joomla.png" data-html-text = "Joomla - a professional website in one day & amp; lt; i & amp; gt; buy & amp; lt; / i & amp; gt; "& gt; Joomla - professional site in one day & lt; / option & gt;
& lt; / select & gt;
 & lt; / form & gt;
& lt; / div & gt;

Answer 3, authority 40%

Another example with select2 plugin : 

$ ('. js-select'). select2 (); 
. select-wrap .select2-container {
 width: 220px! important;
}
.select-wrap .select2-container - default .select2-selection - single {
 border: 1px solid #ccc;
 border-radius: 5px;
 height: 30px;
 outline: none;
}
.select-wrap .select2-container - default .select2-selection - single .select2-selection__rendered {
 line-height: 30px;
 font-size: 14px;
 font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.select-wrap .select2-container - default .select2-selection - single .select2-selection__arrow {
 height: 28px;
}
.select-wrap .select2-container - default .select2-selection - single .select2-selection__arrow b {
 border-color: skyblue transparent transparent transparent;
 border-width: 10px 5px 0 5px;
 margin-left: -5px;
 margin-top: -5px;
}
.select2-search - dropdown {
 display: none! important;
}
.select2-dropdown,
.select-wrap .select2-container - default.select2-container - open.select2-container - below .select2-selection - single,
.select-wrap .select2-container - default.select2-container - open.select2-container - below .select2-selection - multiple {
 border-color: skyblue! important;
 border-radius: 5px! important;
} 
& lt; script src = "https://cdnjs.cloudflare.com/ajax/libs /jquery/3.4.1/jquery.min.js "integrity =" sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo = "crossorigin =" anonymous "& gt; & lt; / script & gt;
& lt; link href = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel = "stylesheet" / & gt;
& lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js" & gt; & lt; / script & gt;
& lt; div class = "select-wrap" & gt;
  & lt; select class = "js-select" name = "state" & gt;
   & lt; option value = "item1" & gt; item 1 & lt; / option & gt;
   & lt; option value = "item2" & gt; item 2 & lt; / option & gt;
   & lt; option value = "item3" & gt; item 3 & lt; / option & gt;
   & lt; option value = "item4" & gt; item 4 & lt; / option & gt;
  & lt; / select & gt;
& lt; / div & gt;

Answer 4, authority 20%

I have used this JQuery plugin. Lightweight enough and customizable.
http://gregfranko.com/jquery.selectBoxIt.js/

Answer 5, authority 20%

Using the jQuery plugin jQueryFormStyler : 

$ ('select'). styler ({
selectSearch: true
}); 
* {
  padding: 0;
  margin: 0;
}
.jq-selectbox {
vertical-align: middle;
cursor: pointer;
  width: 300px;
  position: relative;
}
.jq-selectbox select {
 display: none;
}
.jq-selectbox__select {
height: 30px;
  line-height: 30px;
padding: 0 45px 0 10px;
border: 1px solid #CCC;
border-bottom-color: # B3B3B3;
border-radius: 4px;
background: # F5F5F5 url (data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9 + OQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABdJREFUeNpi + v // PxM2zMDAQEtxgAADAF2uTe9L4getAAAAAElFTkSuQmCC) repeat-x;
box-shadow: inset 1px -1px # F1F1F1, inset -1px 0 # F1F1F1, 0 1px 2px rgba (0,0,0,0.1);
text-shadow: 1px 1px #FFF;
font-size: 16px;
  font-family: 'segoe ui';
color: # 9D9D9D;
background: #fff;
border: 1px solid # 3399CC;
}
/*.jq-selectbox__select:hover {
background-color: # E6E6E6;
background-position: 0 -10px;
} * /
.jq-selectbox__select: active {
background: # F5F5F5;
box-shadow: inset 1px 1px 3px #DDD;
}
.jq-selectbox.focused .jq-selectbox__select {
border: 1px solid # 5794BF;
}
.jq-selectbox.disabled .jq-selectbox__select {
border-color: #CCC;
background: # F5F5F5;
box-shadow: none;
color: # 888;
}
.jq-selectbox__select-text {
display: block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.jq-selectbox .placeholder {
color: # 888;
}
.jq-selectbox__trigger {
position: absolute;
top: 0;
right: 0;
width: 34px;
height: 100%;
}
.jq-selectbox__trigger-arrow {
position: absolute;
top: 12px;
right: 12px;
width: 0;
height: 0;
overflow: hidden;
border-top: 9px solid # 3399CC;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
opacity: 0.3;
filter: alpha (opacity = 30);
}
.jq-selectbox: hover .jq-selectbox__trigger-arrow {
opacity: 1;
filter: alpha (opacity = 100);
}
.jq-selectbox.disabled .jq-selectbox__trigger-arrow {
opacity: 0.3;
filter: alpha (opacity = 30);
}
.jq-selectbox__dropdown {
top: 33px;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
border: 1px solid #CCC;
border-radius: 4px;
background: #FFF;
box-shadow: 0 2px 10px rgba (0,0,0,0.2);
font: 14px / 18px Arial, sans-serif;
}
.jq-selectbox__search {
margin: 5px;
}
.jq-selectbox__search input {
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 5px 27px 6px 8px;
outline: none;
border: 1px solid #CCC;
border-radius: 3px;
background: url (data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNqU078LAXEYx / FzYfNzk5TJaFNKYjFYSQZ / hvwBsvg1UCY2xT9gM8hukQGThWRjkcFw3pdnujhfT736Xn2fPvfc3fd07V0OFDDFAnM0ENYsZRiGLSc9OpqIYIA9fMhhjCrW2h9VlMlcH / aymMGtOqEugX08PwQucUZKdTozMIqdTc9WepQD7wjY9ARx + ydwhfyXfS + S0qMcOEQJGcueB3VccFINdMgal6NzkmPjRwJXxDBB7 / 2RDdtAp6wb + dpphHDASG5QQ0V6u2aoSqBZD / lDrNWRJynLK2qpBn4rc6K2XB9 / Nb8EGABtf1thzY6X2AAAAABJRU5ErkJggg ==) no-repeat 100% 50%;
box-shadow: inset 1px 1px # F1F1F1;
color: # 333;
-webkit-appearance: textfield;
}
.jq-selectbox__search input :: - webkit-search-cancel-button,
.jq-selectbox__search input :: - webkit-search-decoration {
-webkit-appearance: none;
}
.jq-selectbox__not-found {
margin: 5px;
padding: 5px 8px 6px;
background: # F0F0F0;
font-size: 13px;
}
.jq-selectbox ul {
margin: 0;
padding: 0;
}
.jq-selectbox li {
min-height: 18px;
padding: 5px 10px 6px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
white-space: nowrap;
color: # 231F20;
}
.jq-selectbox li.selected {
background-color: # A3ABB1;
color: #FFF;
}
.jq-selectbox li: hover {
background-color: #EEEEEE;
color: # 000;
}
.jq-selectbox li.disabled {
color: #AAA;
}
.jq-selectbox li.disabled: hover {
background: none;
}
.jq-selectbox li.optgroup {
font-weight: bold;
}
.jq-selectbox li.optgroup: hover {
background: none;
color: # 231F20;
cursor: default;
}
.jq-selectbox li.option {
padding-left: 25px;
}
.jq-select-multiple {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1px;
border: 1px solid #CCC;
border-bottom-color: # B3B3B3;
border-radius: 4px;
box-shadow: inset 1px 1px # F1F1F1, 0 1px 2px rgba (0,0,0,0.1);
background: #FFF;
color: # 333;
font: 14px / 18px Arial, sans-serif;
cursor: default;
}
.jq-select-multiple.focused {
border: 1px solid # 5794BF;
}
.jq-select-multiple.disabled {
border-color: #CCC;
background: # F5F5F5;
box-shadow: none;
color: # 888;
}
.jq-select-multiple ul {
margin: 0;
padding: 0;
}
.jq-select-multiple li {
padding: 3px 9px 4px;
list-style: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
white-space: nowrap;
}
.jq-select-multiple li: first-child {
border-radius: 3px 3px 0 0;
}
.jq-select-multiple li: last-child {
border-radius: 0 0 3px 3px;
}
.jq-select-multiple li.selected {
background: # 08C;
color: #FFF;
}
.jq-select-multiple li.disabled {
color: #AAA;
}
.jq-select-multiple.disabled li.selected,
.jq-select-multiple li.selected.disabled {
background: #CCC;
color: #FFF;
}
.jq-select-multiple li.optgroup {
font-weight: bold;
}
.jq-select-multiple li.option {
padding-left: 25px;
} 
& lt; script src = "https://ajax.googleapis.com/ajax/libs /jquery/2.1.1/jquery.min.js"></script>
& lt; script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.formstyler.min.js" & gt; & lt; / script & gt;
& lt; select & gt;
 & lt; option value = "- 1" & gt; Growth & lt; / option & gt;
 & lt; option value = "150 cm" & gt; 150 cm & lt; / option & gt;
 & lt; option value = "151 cm" & gt; 151 cm & lt; / option & gt;
& lt; option value = "152 cm" & gt; 152 cm & lt; / option & gt;
 & lt; option value = "153 cm" & gt; 153 cm & lt; / option & gt;
 & lt; option value = "154 cm" & gt; 154 cm & lt; / option & gt;
 & lt; option value = "155 cm" & gt; 155 cm & lt; / option & gt;
& lt; / select & gt;
Previous articleThe + = Operator in Java
Next articleWhere can I get the C++ standard?

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions

© Copyright - Newspaper by TagDiv