Динамическая ширина у input и select

#html #css #input #форма #html_select

                    
Есть форма с полями типа text и select со стоящими в линию метками (label). Все метки
и поля могут иметь различную длину (ну, как всегда в формах). label'ы выравниваются
влево, input и select левым краем примыкают к label, и в общем-то цель состоит в том,
чтобы выровнять инпуты и селекты по правому краю так, чтобы они как бы растягивались
автоматически от конца label до правого края контейнера и в итоге имели различную длину,
но четкое выравнивание справа. Картинки загружать не дают, попробую тут нарисовать

Как по умолчанию:

Метка поля --------------

Более длинная метка поля --------------

Ещё метка поля --------------

Как нужно мне:

Метка поля -------------------------------------

Более длинная метка поля ----------------

Ещё метка поля -------------------------------
    

Ответы

Ответ 1

Можно например так: http://jsfiddle.net/DdnQ2/



table{
    width:500px;
}
td{
    width:0;
    white-space:nowrap;
}
td.field{
    width:100%;
}
input{
    width:100%;
}

    

        

            слово
        
        

            
        
    


    

        

            длинное слово
        
        

            
        
    





Некоторых особо крутых верстальщиков смущает использование таблиц для позиционирования
элементов. Чтобы таковые не смущались, можно выполнить рекомендацию w3c и поставить
таблицам атрибут role=presentation


Ответ 2

В примере заключен базовый принцип работы универсального решения, которое вы сами
сможете легко дополнить необходимыми свойствами и применить к своему проекту:



/* Reset CSS */
* {
  box-sizing: border-box;
  outline: 0;
  margin: 0;
}

.divMain:after {
  content: '';
  display: block;
  clear: both;
}
.divA {
  float: left;
}
.divB {
  overflow: hidden;
}
.divB input {
  width: 100%;
}

  

    Я редактируюсь!
  
  

    
  

Как стилизировать “select”?

#html #css #вёрстка #html_select

                    


Как лучше стилизировать данный "select" ?
    

Ответы

Ответ 1

По нормальному пути развития, Вы не стилизируете стандартный селек до такого состояния.
Это будет нечто вроде dropdown.
Рекомендую посмотреть уже на готовые решения, которые вы сможете без труда стилизировать
например вот или вот, их много, это как пример. Разумеется вы можете это все не использовать,
а лишь посмотреть как сделано там и сделать по своему, в любом случае Вы поймете как
получить желаемый эффект.
В случае если этот селект вам нужен только для навигации, предлагаю Вам отказаться
от идеи select и сделать обычный  dropdown

Есть несколько одинаковых списков, если в одном выбираю значение - как это значение скрывать в других списках?

#html #jquery #html_select

Есть несколько списков одинаковых.


    Text1
    Text2
    Text3



    Text1
    Text2
    Text3



    Text1
    Text2
    Text3



Мне нужно сделать так, чтобы когда я в первом выбирал например первое значение это
значение в других списках ставало disabled, или скрывалось.
А если я убираю активность с опции которую выбрал, то во всех селектах появлялся
эта опция для выбора.

Как такое реализовать?
    

Ответы

Ответ 1

Если я вас правильно понял, вот так работает.



$('.change').on('change',function() {
      $(this).children('option').each(function(){
      var options = $('.change option[value='+$(this).val()+']').not(this);
      if($(this).is(':selected')) {
        $(options).prop('disabled',true);
        $(options).prop('selected',false);
      } else {
        $(options).prop('disabled',false);
      }
  });
});


    Text1
    Text2
    Text3



    Text1
    Text2
    Text3



    Text1
    Text2
    Text3



Ответ 2

Предполагаю, что нужно что-то такое:



let trackingSelect = 'select[name=name]:eq(0)';

$(document).on('change', trackingSelect, function(){	
  let optionValue = this.selectedIndex == 0 ? 'option[value="' + $(this).val()  +
'"]' : 'option[value]';
  let propFlag = this.selectedIndex == 0 ? true : false;     
  $('select[name=name]').not(trackingSelect).find(optionValue).prop('disabled', propFlag);
       
});

/*
$(document).on('change', trackingSelect, function(){	
  let optionValue = 'option[value]';
  let propFlag = false;   
  
  if (this.selectedIndex == 0) {
    optionValue = 'option[value="' + $(this).val()  + '"]';
    propFlag = true;
  }
  $('select[name=name]').not(trackingSelect).find(optionValue).prop('disabled', propFlag);
       
});
*/


Text1
    Text2
    Text3



    Text1
    Text2
    Text3



    Text1
    Text2
    Text3





Где select[name=name]:eq(0) указывает на первый select, this.selectedIndex == 0 указывает
на первый option в данном select'е (при желании - изменить)

Однако в данном случае, если человек ткнет что-то в других селектах, а потом в первом
выберет первый - то нужно предупредить юзера, чтоб перевыбрал значения


Ответ 3

Решение задачи:



$('.change').on('change', function() {
  $(this).children('option').each(function() {
    var option = $(this),
      options = $('.change option[value=' + option.val() + ']').not(this);

    if (!option.is(':disabled')) {
      if (option.is(':selected')) {
        $(options).prop('disabled', true);
        $(options).prop('selected', false);
      } else {
        $(options).prop('disabled', false);
      }
    }

  });

});


Text1
    Text2
    Text3



    Text1
    Text2
    Text3



    Text1
    Text2
    Text3

Как присвоить значение текущей даты тегу <select>

#php #html #html_select

                            
  01
  02
  03
  04
  05




                            
  Сентябрь
  Октябрь
  Ноябрь
  Декабрь




                           
  1996
  1997
  1998
  1999
  2000





Есть необходимость организации на сайте выбора даты именно в таком формате при помощи
тега SELECT, при этом значением по умолчанию у каждого должна быть текущая дата, соответствующая
своему полю. 

К сожалению на просторах не нашел ничего подходящего, либо моих знаний катастрофически
не хватает. Прошу вашей помощи! Хотя бы направление, где искать...
    

Ответы

Ответ 1

Используйте функции для работы со временем, в сочетании с массивами и циклами:







    
    
    




    Необходимо выбрать дату просмотра:
    

        
        
            
            
                
                
                >
            
        

        
        
            
            
                
                
                >
            
        

        
        
            
            
                
                >
            
        
    






Здесь каждый тег  генерируется в цикле. В условии идёт сравнение с текущей
датой - если дата и текущий элемент массива совпадают, тегу  назначается атрибут
selected. Возможно вам ещё надо будет весь этот блок кода прописать в контейнере 
.


Ответ 2

Нужно добавить атрибут selected к нужному option



                            
  01
  02
  03
  04




                            
  Сентябрь
  Октябрь
  Ноябрь
  Декабрь




                           
  1996
  1997
  1998
  1999
  2000

как реализовать placeholder для select

#html #валидация #html_select #placeholder #required

Проблема в следующем если использовать что то, то
по умолчанию выбирается "что-то", и нельзя использовать required для select, так как
уже выбрано "что-то". В связи с этим вопрос как реализовать placeholder для select.
Отдельным блоком с position: absolute, не использую, может есть что-то получше.
    

Ответы

Ответ 1

Проверьте чтото типа 

Choose it1


 А дальше через Jquery делайте проверку типа

if($('#first').val()=='0'){alert('Choose it');}

Как связать 2 выпадающих меню между собой по ключу?

#javascript #html #jquery #html_select #фильтры

Есть 2 выпадающих меню: в первом - выводится марка автомобиля, а во втором, -к каждой
марке во вложенности дерева с глубиной data-sf-depth="1"? - ее модели. Как сделать
списки связанными, чтобы при выборе каждой марки появлялись только ее модели? У меня
пока получилось сделать так, что при выборе марки выводятся только модели (но все,
а не конкретно ее!), либо не выводится ни одна модель.





window.addEventListener("DOMContentLoaded", function() {
  var select1 = document.getElementsByClassName("sf-field-taxonomy-ad_cat")[0].getElementsByClassName("sf-input-select")[0],
    select2 = document.getElementsByClassName("sf-field-taxonomy-ad_cat")[1].getElementsByClassName("sf-input-select")[0],
    opt = [].slice.call(select1.options, 0),
    opt2 = [].slice.call(select2.options, 0);
  var value;
  select1.onchange = function() {
    opt.forEach(function(option, i) {
      if (option.selected) {
        value = option.value;
        return false;
      }
    });
    opt2.forEach(function(option, i) {
      var parent = option.parentNode;
      if (option.classList.contains("sf-level-1") || !i) {
        select2.appendChild(option);
      } else {
        if (parent) {
          parent.removeChild(option);
        }
      }
    });
  }
});

  
	
		марка
а/м
		Alfa
Romeo
		Audi		
	




  
	
		марка а/м
		Alfa
Romeo
		   156
		Audi
		   A6C5
		   A4
		   A6
	





    

Ответы

Ответ 1

Я бы немного изменил логику: не стал бы в select с моделями дублировать марки, оставил
бы там только модели и сделал бы этот select недоступным для выбора, пока не выбрана марка.

Связал бы я два select'а следующим образом: моделям задал бы класс, который соответствует
value марки.



$('.cars').change(function(){
   $('.models').prop('selectedIndex', 0); //ощищаем select с моделями при каждом
изменении select'а с марками
   var car = $(this).val(); //получаем value выбранной марки
   if(car != '') { //проверяем, выбрана ли хоть какая-то марка
      $('.models').attr('disabled',false); //открываем select с моделями
      $('.models option').css('display','none'); //сначала скрываем все модели
      $('.models option.'+car).css('display','inline'); //затем открываем те, которые
нам нужны
   }
   else {
      $('.models').attr('disabled',true); //если не выбрана ни одна марка, скрываем
select с моделями
   }
});



  марка а/м
  Alfa Romeo
  Audi
  Nissan







  модель а/м
  156
  A6C5
  A4
  A6
  Juke
  Murano

Как передать id через select?

#php #html #html_select

Как передать id категории?


                                  
        @foreach( $dataCategory as $Category)
            {{$Category['category']}}
        @endforeach()                           
    


    

Ответы

Ответ 1


                                 
     @foreach( $dataCategory as $Category)
         {{$Category['category']}}
     @endforeach()                           
   



Ответ 2


                                 
        @foreach( $dataCategory as $Category)
            {{$Category['category']}}
        @endforeach()                           
    


check $_GET['category'] or $_POST['category'] => 

Как выбрать option в select по значению?

#html #html5 #angular2 #typescript #html_select

Возможно ли указать значение option, которое будет выбираться по умолчанию при загрузке
страницы? Пробовал через selected и  selected="selected". Результат нулевой.


   Названию
   Автору
   Типу
   Расширению




    

Ответы

Ответ 1

Судя по разметке - используется Angular.

При связывании через ngModel выбирается option чье значение совпадает со значением
typeSearch.

Таким образом достаточно просто присвоить этой переменной или свойству нужное значение.


Ответ 2

Можешь обойти циклом все значения select и применить порядковый номер соответствующего
option (значение option совпадает с нужным значением) к select через selectedIndex.

Пример:



var defaultValue = "Расширению";
var yourSelect = document.querySelector('.form-control');

for (let i, j = 0; i = yourSelect.options[j]; j++) {
  if (i.value == defaultValue) {
    yourSelect.selectedIndex = j;
    break;
  }
}

  Названию
  Автору
  Типу
  Расширению





Если нужного значения в select нет, то будет выбрано значение selected или же самое
первое (при отсутствии selected).

Как связать radiobutton с select?

#javascript #html #html_select #radio

Как сделать так, чтоб при выборе в radio какого-то значение, то select переключался
на это же значение?


  1
  2
  3
  4
  5


1
2
3
4
5

    

Ответы

Ответ 1

Вариант без jQuery с использованием индексов вместо value:



var select = document.querySelector('select');
var inputs = document.querySelectorAll('input[name="select"]');

for (const i in inputs) {
  if (inputs.hasOwnProperty(i)) {
    inputs[i].addEventListener('change', function () {
      select.selectedIndex = i;
    });
  }
}

1
2
3
4
5



1
2
3
4
5




JSFiddle


Ответ 2

Нужно добавить в оба тега атрибуты value, после чего на основании значения этого
атрибута у input выбирать соответствующее значение у select, по событию change, которое
будет слушаться у input.



$("input[name=select]").on("change", function(){
$("select").val($(this).val());
});


1
2
3
4
5



1

2

3

4

5

Как сделать placeholder для select

#javascript #html #jquery #css #html_select

Как сделать так, чтобы при выборе, к примеру, США, слова Выбранная страна оставались.
То есть Выбранная страна: постоянно должны быть внутри независимо от выбора страны.




  Выбранная страна: Россия
  Россия
  США
  Турция
  Китай




    

Ответы

Ответ 1

Сделать можно так: 


помещаем select в отдельный контейнер, например, .block;
добавляем в .block еще один блок, например, .placeholder, в который будем выводить
текст "Выбранная страна:" + текст выбранной option, и располагаем его поверх select;
для .placeholder в css указываем pointer-events:none;, чтобы не
припятствовать клику по select


На jQuery это будет выглядеть вот так:



function selPlaceholder(block) {
  var placeholder = block.find('.placeholder'),
    select = block.find('select');
  placeholder.text(placeholder.attr('data-text') + select.find('option:selected').text());
}

$('.block').each(function() {
  selPlaceholder($(this));
});

$('.block select').on('change', function() {
  selPlaceholder($(this).closest('.block'));
});
.block,
.block select {
  position: relative;
  width: 300px;
  font-family: 'Arial';
  font-size: 12px;
}

.block .placeholder {
  position: absolute;
  z-index: 1;
  left: 5px;
  top: 2px;
  pointer-events: none;
  background: #fff;
}


  

  
    Россия
    США
    Турция
    Китай
  




  

  
    Бесплатный
    Профессиональный
    Для бизнеса
  




  

  
    USD
    EUR
    RUB
    UAH
  

Стилизация <select> и <option>

#html #css #style #html_select

Как стилизовать выпадаюзий список? 


.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 >select:active,
.select> select:focus {
    background: url(images/selectactive.png)       no-repeat transparent;
}
select > option {
    background-color: transparent;
    border: 0;
    background-image: url(images/option.png);
    padding-right: 15px;
    height: 31px;
    width: 220px;
}
select > option:nth-child(1) {
    background-image: url(images/option1.png);
}
select > option:nth-last-child {
    background-image: url(images/optionlast.png);
}
.select> 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;
}


  
    
      Language of communication                       
    English
    Spanish
  








    

Ответы

Ответ 1

Приведу вот такой пример с использованием HTML5 CSS3 и jQuery.
Общий суть в том что jQuery проверяет наш элемент select и под ним рисует кусок HTML
кода.



$(document).ready(function() {

  // Элемент select, который будет замещаться:
  var select = $('select.makeMeFancy');

  var selectBoxContainer = $('
', {
    width: select.outerWidth(),
    className: 'tzSelect',
    html: '
'
  });

  var dropDown = $('
', {
    className: 'dropDown'
  });
  var selectBox = selectBoxContainer.find('.selectBox');

  // Цикл по оригинальному элементу select

  select.find('option').each(function(i) {
    var option = $(this);

    if (i == select.attr('selectedIndex')) {
      selectBox.html(option.text());
    }

    // Так как используется jQuery 1.4.3, то мы можем получить доступ 
    // к атрибутам данных HTML5 с помощью метода data().

    if (option.data('skip')) {
      return true;
    }

    // Создаем выпадающий пункт в соответствии
    // с иконкой данных и атрибутами HTML5 данных:

    var li = $('
', {
      html: '' +
        option.data('html-text') + ''
    });

    li.click(function() {

      selectBox.html(option.text());
      dropDown.trigger('hide');

      // Когда происходит событие click, мы также отражаем
      // изменения в оригинальном элементе select:
      select.val(option.val());

      return false;
    });

    dropDown.append(li);
  });

  selectBoxContainer.append(dropDown.hide());
  select.hide().after(selectBoxContainer);

  // Привязываем пользовательские события show и hide к элементу dropDown:

  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;
  });

  // Если нажать кнопку мыши где-нибудь на странице при открытом элементе dropDown,
  // он будет спрятан:

  $(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 {
  /* Контейнер Ð´Ð»Ñ Ð½Ð¾Ð²Ð¾Ð³Ð¾ Ñлемента select */
  height: 34px;
  display: inline-block;
  min-width: 460px;
  position: relative;
  /* ÐŸÑ€ÐµÐ´Ð²Ð°Ñ€Ð¸Ñ‚ÐµÐ»ÑŒÐ½Ð°Ñ Ð·Ð°Ð³Ñ€ÑƒÐ·ÐºÐ° фонового изображениÑ
Ð´Ð»Ñ Ð²Ñ‹Ð¿Ð°Ð´Ð°ÑŽÑ‰Ð¸Ñ… пунктов */
  background: url("../img/dropdown_slice.png") no-repeat -99999px;
}

.tzSelect .selectBox {
  position: absolute;
  height: 100%;
  width: 100%;
  /* УÑтановка шрифта */
  font: 13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  text-align: center;
  text-shadow: 1px 1px 0 #EEEEEE;
  color: #666666;
  /* ИÑпользование множеÑтвенных фонов 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;
  /* ИÑпользование множеÑтвенных фонов 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;
}


/* Стили Ñтраницы */

#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;
}


  
Ваш продукт
  
    
    
      
      Выберите продукт
      JavaScript + jQuery для начинающих в видеоформате
      PHP + MySQL для
начинающих
      WordPress
- профессиональный блог за один день
      Joomla
- профессиональный сайт за один день
    
  





Как видно здесь стили различаются от вашего примера, но их вы можете изменить в любой
момент под ваши нужды.


Ответ 2

На самом деле стилизовать только с помощью CSS можно. С некоторыми ограничениями,
и все же. Для этого нужно спрятать select внутри div, и стилизовать сам div. 



* {
  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;
}

  

    
      Test
      Test
      Test
    
    

  
  

    

    
      Test
      Test
      Test
    
  
  

    

    

    
      Test
      Test
      Test
    
  





Пример можно посмотреть тут: http://codepen.io/Eliseenko/pen/bdarGM

Это очень старый пример, можно сделать намного лучше. Что касается option, то на
чистом css он стилизуется, но не во всех браузерах.


Ответ 3

Я использовал данный JQuery плагин. Достаточно легковесный и поддается кастомизации.
http://gregfranko.com/jquery.selectBoxIt.js/


Ответ 4

С помощью jQuery-плагина 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;
}



  Рост
  150 см
  151 см
  152 см
  153 см
  154 см
  155 см





Fiddle


Ответ 5

Еще пример с select2 плагином:



$('.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;
}



  

    
      item 1
      item 2
      item 3
      item 4
    

От чего зависит внешний вид option?

Для контейнера select в CSS указано:
select { font-family: "PT Mono"; font-size: 18px; padding: 0 6px; height: 36px; }
К первому (видимому) option применяются все правила.
А вот к остальным:
В Opera (версия 48.0.2685.35; рис. 1) применяется font-family, font-size и padding (правда, только горизонтальный, вертикальный, как оказалось, — нет).
В Firefox (версия 56.0; рис. 2) — ничего.
От чего зависит такое поведение (и, как следствие, внешний вид) option и можно ли на это повлиять средствами CSS?

Ответ

От чего зависит такое поведение (и, как следствие, внешний вид) option и можно ли на это повлиять средствами CSS?
Если смотреть на стандарты то - нет. Option рисуется часто средствами ОС и вы не можете никак на это повлиять. Если углубляться в детали, то на текущий момент браузеры по немногу отказываются от ОС спецефичных UI элементов, а другие хитро настраивают и по немногу появляется возможность стилизовать средствами css, но часто очень ограниченно.
Именно по этому уже давно, если вам что то нужно серьёзное от "select" то делаете его сами, а option становятся просто элементами списка в вашем диве. Но увы такое без JS проделать трудно, но есть и готовые решения.

Есть несколько одинаковых списков, если в одном выбираю значение - как это значение скрывать в других списках?

Есть несколько списков одинаковых.
Text1 Text2 Text3
Text1 Text2 Text3
Text1 Text2 Text3
Мне нужно сделать так, чтобы когда я в первом выбирал например первое значение это значение в других списках ставало disabled, или скрывалось. А если я убираю активность с опции которую выбрал, то во всех селектах появлялся эта опция для выбора.
Как такое реализовать?

Ответ

Если я вас правильно понял, вот так работает.
$('.change').on('change',function() { $(this).children('option').each(function(){ var options = $('.change option[value='+$(this).val()+']').not(this); if($(this).is(':selected')) { $(options).prop('disabled',true); $(options).prop('selected',false); } else { $(options).prop('disabled',false); } }); }); Text1 Text2 Text3 Text1 Text2 Text3 Text1 Text2 Text3

Как передать id через select?

Как передать id категории?

@foreach( $dataCategory as $Category) {{$Category['category']}} @endforeach()

Ответ

@foreach( $dataCategory as $Category) {{$Category['category']}} @endforeach()

Как связать radiobutton с select?

Как сделать так, чтоб при выборе в radio какого-то значение, то select переключался на это же значение?
1 2 3 4 5
1 2 3 4 5

Ответ

Вариант без jQuery с использованием индексов вместо value
var select = document.querySelector('select'); var inputs = document.querySelectorAll('input[name="select"]'); for (const i in inputs) { if (inputs.hasOwnProperty(i)) { inputs[i].addEventListener('change', function () { select.selectedIndex = i; }); } } 1 2 3 4 5
1 2 3 4 5
JSFiddle

Как сделать placeholder для select

Как сделать так, чтобы при выборе, к примеру, США, слова Выбранная страна оставались. То есть Выбранная страна: постоянно должны быть внутри независимо от выбора страны.
Выбранная страна: Россия Россия США Турция Китай

Ответ

Сделать можно так:
помещаем select в отдельный контейнер, например, .block добавляем в .block еще один блок, например, .placeholder, в который будем выводить текст "Выбранная страна:" + текст выбранной option, и располагаем его поверх select для .placeholder в css указываем pointer-events:none;, чтобы не припятствовать клику по select
На jQuery это будет выглядеть вот так:
function selPlaceholder(block) { var placeholder = block.find('.placeholder'), select = block.find('select'); placeholder.text(placeholder.attr('data-text') + select.find('option:selected').text()); } $('.block').each(function() { selPlaceholder($(this)); }); $('.block select').on('change', function() { selPlaceholder($(this).closest('.block')); }); .block, .block select { position: relative; width: 300px; font-family: 'Arial'; font-size: 12px; } .block .placeholder { position: absolute; z-index: 1; left: 5px; top: 2px; pointer-events: none; background: #fff; }

Россия США Турция Китай

Бесплатный Профессиональный Для бизнеса

USD EUR RUB UAH