Как сделать option у select 80% ширины?

Question

[Дима Долготер]

Есть select. Пусть он будет 200px. Как сделать чтоб к option применялись следующие стили
opion{
width:80%;
margin: 0 auto;
}

Comments

[Ankhena]

Заменить select на что-то другое. Либо сразу либо плагинами (их много, выбирайте на свой вкус и цвет)
www.webmasters.by/articles/html-coding/2458-custom...

Answer 1

[FalseCode]

Вот код на jquery. А там уже стилизуй как угодно)

function selectStyle(){
  $('.select').each(function(){
    // Variables
    var $this = $(this),
      selectOption = $this.find('option'),
      selectOptionLength = selectOption.length,
      selectedOption = selectOption.filter(':selected'),
      dur = 500;

    $this.hide();
    // Wrap all in select box
    $this.wrap('<div class="select"></div>');
    // Style box
    $('<div>',{
      class: 'select__gap',
      // text: 'Please select'
      text: $(this).find('option:first-child').html(),
    }).insertAfter($this);
    
    var selectGap = $this.next('.select__gap'),
      caret = selectGap.find('.caret');
    // Add ul list
    $('<ul>',{
      class: 'select__list'
    }).insertAfter(selectGap);    

    var selectList = selectGap.next('.select__list');
    // Add li - option items
    for(var i = 0; i < selectOptionLength; i++){
      $('<li>',{
        class: 'select__item',
        html: $('<span>',{
          text: selectOption.eq(i).text()
        })        
      })
      .attr('data-value', selectOption.eq(i).val())
      .appendTo(selectList);
    }
    // Find all items
    var selectItem = selectList.find('li');

    selectList.slideUp(0);
    selectGap.on('click', function(){
      if(!$(this).hasClass('open')){
        $(this).addClass('open');
        selectList.slideDown(dur);

        selectItem.on('click', function(){
          var chooseItem = $(this).data('value');

          $('select').val(chooseItem).attr('selected', 'selected');
          selectGap.text($(this).find('span').text());

          selectList.slideUp(dur);
          selectGap.removeClass('open');
        });
        
      } else {
        $(this).removeClass('open');
        selectList.slideUp(dur);
      }
    });   

    });
}

.select{
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 20px;
	border: 1px solid  #bcbcbc;
	outline: none !important;
	&:focus{
		outline: none !important;
	}
}

.select__gap{
	position: relative;
	overflow: hidden;
	margin-bottom: -1px;
	padding: 10px 20px;
	border-bottom: 1px solid  #bcbcbc;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	transition: all .3s;
	&:before{
		content: '\f107';
		position: absolute;
		right: 10px;
		top: 50%;
		font: normal normal normal 14px/1 FontAwesome;
		transform: translateY(-50%);
		transition: all .3s;
	}

	&.open{
		margin-bottom: 15px;

		&:before{
			transform: translateY(-50%) rotate(180deg);
		}
	}
}

.select__list{
	padding: 0;
	li{
		margin: 0;
		padding: 5px 20px;
		cursor: pointer;
		transition: all .3s;
		&:before{
			display: none;
		}
		&:hover{
			background: #f6f6f6;
			color: #5e5e5e;
		}
	}
}

Comments

[Сергей delphinpro]

С клавиатуры, конечно не управляется? на мобильных девайсах не подменяет вызов на удобный системный селект? =)
Кастомный селект — задача не тривиальная, с кондачка не решается.
Если нет времени и/или скиллов для нормальной реализации, лучше взять готовое решение, например, jquery.select2

[FalseCode]

Сергей delphinpro, согласен что можно готовым решением обойтись. Но нужно понемногу и самому что-то писать)