html - multiselect - select placeholder select2




Como eu faço um espaço reservado para uma caixa 'select'? (16)

Você pode fazer isso sem usar Javascript usando somente HTML Você precisa definir a opção de seleção padrão disabled="" e selected="" e selecionar tag required="". O navegador não permite que o usuário envie o formulário sem selecionar uma opção.

<form action="" method="POST">
    <select name="in-op" required="">
        <option disabled="" selected="">Select Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <input type="submit" value="Submit">
</form>

Eu estou usando espaços reservados para entradas de texto que está funcionando muito bem. Mas também gostaria de usar um marcador de posição para minhas caixas de seleção. Claro que posso usar este código:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

Mas o 'Selecione sua opção' está em preto em vez de lightgrey. Então, minha solução poderia ser baseada em CSS. jQuery está bem também.

Isso só torna a opção cinza no menu suspenso (portanto, depois de clicar na seta):

option:first {
    color: #999;
}

Edit: A questão é: como as pessoas criam espaços reservados em selectboxes? Mas já foi respondido, vivas.

E usar isso resulta no valor selecionado sempre em cinza (mesmo depois de selecionar uma opção real):

select {
    color:#999;
}

Entrada [type="text"] Espaço reservado para estilo para elementos selecionados

A solução a seguir simula um marcador de lugar relacionado a um elemento de input[type="text"] :

$('.example').change(function () {
  $(this).css('color', $(this).val() === '' ? '#999' : '#555');
});
.example {
  color: #999;
}

.example > option {
  color: #555;
}

.example > option[value=""] {
  color: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="example">
  <option value="">Select Option</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>


Algo como isso talvez?

HTML:

<select id="choice">
    <option value="0" selected="selected">Choose...</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>
</select>

CSS:

#choice option { color: black; }
.empty { color: gray; }

JavaScript:

$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")
});

$("#choice").change();

Exemplo de trabalho: http://jsfiddle.net/Zmf6t/


Apenas tropeçou nesta questão, aqui está o que funciona no FireFox & Chrome (pelo menos)

<style>
    select:invalid { color: gray; }
</style>
<form>
    <select required>
        <option value="" disabled selected hidden>Please Choose...</option>
        <option value="0">Open when powered (most valves do this)</option>
        <option value="1">Closed when powered, auto-opens when power is cut</option>
    </select>
</form>

A opção Desativada interrompe a seleção da <option> com o mouse e o teclado, enquanto o uso de 'display:none' permite que o usuário ainda selecione através das setas do teclado. O estilo 'display:none' apenas faz com que a caixa de listagem pareça 'legal'.

Nota: Usar um atributo de value vazio na opção "placeholder" permite que a validação (atributo obrigatório) contenha o "placeholder", portanto, se a opção não for alterada, mas for necessária; o navegador deve solicitar ao usuário que escolha uma opção na lista.

Atualização (julho de 2015):

Este método é confirmado nos seguintes navegadores:

  • Google Chrome - v.43.0.2357.132
  • Mozilla Firefox - v.39.0
  • Safari - v.8.0.7 (espaço reservado é visível na lista suspensa, mas não é selecionável)
  • Microsoft Internet Explorer - v.11 (espaço reservado é visível na lista suspensa, mas não é selecionável)
  • Projeto Spartan - v.15.10130 (espaço reservado é visível na lista suspensa, mas não é selecionável)

Atualização (outubro de 2015):

Removido o style="display: none" em favor do atributo HTML5 hidden que possui amplo suporte. O elemento hidden tem características semelhantes à display: none no Safari, IE, (o Projeto Spartan precisa ser verificado), onde a option é visível na lista suspensa, mas não é selecionável.

Atualização (janeiro de 2016):

Quando o elemento select é required ele permite o uso da :invalid que permite que você estilize o elemento select quando estiver no estado "placeholder". :invalid funciona aqui por causa do valor vazio na option espaço reservado.

Quando um valor tiver sido definido, a pseudo-classe :invalid será eliminada. Você também pode usar opcionalmente :valid se assim o desejar.

A maioria dos navegadores suporta essa pseudo-classe. IE10 +. Isso funciona melhor com elementos select com estilo personalizado; Em alguns casos, por exemplo (Mac no Chrome / Safari), você precisará alterar a aparência padrão da caixa de select para que determinados estilos sejam exibidos, como color background-color , color . Você pode encontrar alguns exemplos e mais sobre compatibilidade em developer.mozilla.org .

Aparência do elemento nativo Mac no Chrome:

Usando o elemento de borda alterado Mac no Chrome:


Aqui está uma solução CSS que funciona lindamente. O conteúdo é adicionado (e absolutamente posicionado em relação ao contêiner) após o elemento que o contém ( via: após a pseudo-classe ). Obtém seu texto do atributo placeholder que defini onde usei a diretiva ( attr (placeholder) ). Outro fator importante é o ponteiro de eventos: nenhum - isso permite que os cliques no texto do espaço reservado passem para a seleção. Caso contrário, não será suspenso se o usuário clicar no texto.

Eu adiciono a classe .empty a mim mesmo na diretiva select, mas normalmente eu acho que o angular adiciona / remove o .ng-empty para mim (eu suponho que seja b / c estou injetando a versão 1.2 do Angular no meu exemplo de código)

(A amostra também demonstra como envolver elementos HTML no angularJS para criar suas próprias entradas customizadas)

var app = angular.module("soDemo", []);
app.controller("soDemoController", function($scope) {
  var vm = {};
  vm.names = [{
      id: 1,
      name: 'Jon'
    },
    {
      id: 2,
      name: 'Joe'
    }, {
      id: 3,
      name: 'Bob'
    }, {
      id: 4,
      name: 'Jane'
    }
  ];
  vm.nameId;
  $scope.vm = vm;
});

app.directive('soSelect', function soSelect() {
  var directive = {
    restrict: 'E',
    require: 'ngModel',
    scope: {
      'valueProperty': '@',
      'displayProperty': '@',
      'modelProperty': '=',
      'source': '=',
    },
    link: link,
    template: getTemplate
  };
  return directive;

  /////////////////////////////////
  function link(scope, element, attrs, ngModelController) {
    init();
    return;

    ///////////// IMPLEMENTATION

    function init() {
      initDataBinding();
    }

    function initDataBinding() {
      ngModelController.$render = function() {
        if (scope.model === ngModelController.$viewValue) return;
        scope.model = ngModelController.$viewValue;
      }

      scope.$watch('model', function(newValue) {
        if (newValue === undefined) {
          element.addClass('empty');
          return;
        }
        element.removeClass('empty');
        ngModelController.$setViewValue(newValue);
      });
    }
  }

  function getTemplate(element, attrs) {
    var attributes = [
      'ng-model="model"',
      'ng-required="true"'
    ];

    if (angular.isDefined(attrs.placeholder)) {
      attributes.push('placeholder="{{placeholder}}"');
    }

    var ngOptions = '';

    if (angular.isDefined(attrs.valueProperty)) {
      ngOptions += 'item.' + attrs.valueProperty + ' as ';
    }

    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';
    ngOptions += '"';
    attributes.push('ng-options="' + ngOptions + '"');

    var html = '<select ' + attributes.join(' ') + '></select>';

    return html;
  }

});
so-select {
  position: relative;
}

so-select select {
  font-family: 'Helvetica';
  display: inline-block;
  height: 24px;
  width: 200px;
  padding: 0 1px;
  font-size: 12px;
  color: #222;
  border: 1px solid #c7c7c7;
  border-radius: 4px;
}

so-select.empty:before {
  font-family: 'Helvetica';
  font-size: 12px;
  content: attr(placeholder);
  position: absolute;
  pointer-events: none;
  left: 6px;
  top: 3px;
  z-index: 0;
  color: #888;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="soDemo" ng-controller="soDemoController">
  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>
</div>


Aqui eu modifiquei a resposta de David (resposta aceita). Em sua resposta, ele colocou o atributo disabled e selected na opção option, mas quando nós também colocamos a tag escondida, ela ficará muito melhor. Ao adicionar um atributo oculto extra na tag de opção, impedirá que a opção "Selecione sua opção" seja selecionada novamente após a opção "Durr" ser selecionada.

<select>
    <option value="" disabled selected hidden>Select your option</option>
    <option value="hurr">Durr</option>
</select>


Essa solução funciona no FireFox também:
Sem qualquer JS.

option[default] {
  display: none;
}
<select>
  <option value="" default selected>Select Your Age</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>


Eu queria que o SELECT fosse cinza até ser selecionado para este pedaço de HTML:

<select>
  <option value="" disabled selected>Select your option</option>
  <option value="hurr">Durr</option>
</select>

Eu adicionei estas definições de CSS:

select { color: grey; }
select:valid { color: black; }

Funciona como esperado no Chrome / Safari, talvez também em outros navegadores, mas eu não verifiquei.


Eu vejo sinais de respostas corretas, mas para juntar tudo isso seria a minha solução.

select{
  color: grey;
}

option {
  color: black;
}

option[default] {
   display: none;
}
<select>
    <option value="" default selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>


Não consegui fazer nada disso funcionar atualmente, porque para mim é (1) não obrigatório e (2) preciso da opção de retornar ao padrão selecionável. Então aqui está uma opção pesada se você estiver usando jquery:

var $selects = $('select');
$selects.change(function () {
  var option = $('option:default', this);
  if(option && option.is(':selected')){
          $(this).css('color','#999');
  }
  else{
          $(this).css('color','#555');
  }
});

$selects.each(function(){
  $(this).change();
});
option{
    color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="in-op">
    <option default selected>Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>


Não há necessidade de nenhum JS ou CSS, apenas 3 atributos:

<select>
    <option selected disabled hidden>Default Value</option>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
</select>

ele não mostra a opção, apenas define o valor da opção como padrão.

No entanto, se você simplesmente não gostar de um marcador de posição da mesma cor do restante , poderá corrigi-lo da seguinte forma:

<!DOCTYPE html>
<html>
<head>
<title>Placeholder for select tag drop-down menu</title>
</head>

<body onload="document.getElementById('mySelect').selectedIndex = 0">

<select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"  style="color: gray; width: 150px;">
  <option value="" hidden>Select your beverage</option> <!-- placeholder -->
  <option value="water" style="color:black" >Water</option>
  <option value="milk" style="color:black" >Milk</option>
  <option value="soda" style="color:black" >Soda</option>
</select>

</body>
</html>

Obviamente, você pode separar as funções e pelo menos o CSS do select em arquivos separados.

Nota: a função onload corrige um bug de atualização.


O usuário não deve ver o espaço reservado nas opções de seleção. Eu sugiro usar atributo hidden para opção de espaço reservado e você não precisa de atributo selected para esta opção você pode simplesmente colocá-lo como o primeiro.

select:not(:valid){
  color: #999;
}
<select required>
        <option value="" hidden>Select your option</option>
        <option value="0">First option</option>
        <option value="1">Second option</option>
    </select>


Para um campo obrigatório, existe uma solução de CSS puro nos navegadores modernos:

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>


Se você estiver usando angular, vá assim

<select>
    <option [ngValue]="undefined"  disabled selected>Select your option</option>
    <option [ngValue]="hurr">Durr</option>
</select>


aqui é minha

select:focus option.holder {
  display: none;
}
<select>
    <option selected="selected" class="holder">Please select</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>


Em relação a todas as soluções acima, mas esta parece ser mais válida devido às especificações HTML:

<select>
  <optgroup label="Your placeholder">
    <option value="value">Label</option>
  </optgroup>
</select>

UPDATE: Perdoe-me por esta resposta incorreta, isso definitivamente não é uma solução de espaço reservado para o elemento de select , mas um título para opções agrupadas na lista de elementos de select aberta.





placeholder