[html] ¿Cómo hago un marcador de posición para un cuadro de 'seleccionar'?



Answers

Acabo de tropezar con esta pregunta, esto es lo que funciona en FireFox y Chrome (al 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>

La opción Deshabilitado detiene la <option> seleccionada con el mouse y el teclado, mientras que el uso de 'display:none' permite al usuario seguir seleccionando mediante las flechas del teclado. El estilo 'display:none' solo hace que el cuadro de lista se vea 'bonito'.

Nota: El uso de un atributo de value vacío en la opción "marcador de posición" permite la validación (atributo requerido) para evitar el "marcador de posición", por lo que si la opción no se cambia pero es necesaria; el navegador debe solicitar al usuario que elija una opción de la lista.

Actualización (julio de 2015):

Este método se confirma trabajando en los siguientes navegadores:

  • Google Chrome - v.43.0.2357.132
  • Mozilla Firefox - v.39.0
  • Safari - v.8.0.7 (Marcador de posición es visible en el menú desplegable pero no se puede seleccionar)
  • Microsoft Internet Explorer - v.11 (Marcador de posición es visible en el menú desplegable pero no se puede seleccionar)
  • Proyecto Spartan - v.15.10130 (El marcador de posición es visible en el menú desplegable pero no se puede seleccionar)

Actualización (octubre de 2015):

Se eliminó el style="display: none" a favor del atributo HTML5 hidden que tiene un amplio soporte. El elemento hidden tiene características similares a la display: none en Safari, IE, (el Proyecto Spartan necesita verificación) donde la option es visible en el menú desplegable pero no se puede seleccionar.

Actualización (enero de 2016):

Cuando se required elemento de select , permite el uso de :invalid CSS :invalid que le permite aplicar un estilo al elemento de select cuando está en el estado de "marcador de posición". :invalid funciona aquí debido al valor vacío en la option marcador de posición.

Una vez que se ha establecido un valor, se eliminará la pseudoclase :invalid . También puede usar opcionalmente :valid si así lo desea.

La mayoría de los navegadores admiten esta pseudoclase. IE10 +. Esto funciona mejor con elementos select estilo personalizado; En algunos casos, es decir, (Mac en Chrome / Safari) tendrá que cambiar la apariencia predeterminada del cuadro de select para que se muestren ciertos estilos, es decir, color background-color , color . Puede encontrar algunos ejemplos y más sobre compatibilidad en developer.mozilla.org .

Aspecto del elemento nativo Mac en Chrome:

Usar elemento de borde modificado Mac en Chrome:

Question

Estoy usando marcadores de posición para las entradas de texto que está funcionando bien. Pero me gustaría usar un marcador de posición para mis selectboxes también. Por supuesto que puedo usar este código:

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

Pero la opción "Seleccionar su opción" está en negro en lugar de gris claro. Entonces mi solución podría estar basada en CSS. jQuery está bien también.

Esto solo hace que la opción sea gris en el menú desplegable (luego de hacer clic en la flecha):

option:first {
    color: #999;
}

Editar: La pregunta es: ¿cómo crean las personas marcadores de posición en las casillas de selección? Pero ya ha sido respondido, ¡salud!

Y al utilizar esto, el valor seleccionado siempre será gris (incluso después de seleccionar una opción real):

select {
    color:#999;
}



Intenta esto para un cambio

$("select").css("color","#757575");
$(document).on("change","select",function(){
    if ($(this).val() != "") {
        $(this).css("color","");
    } else {
        $(this).css("color","#757575");
    }
});



Quería que el SELECCIONAR fuera gris hasta que lo seleccionaran para esta pieza de HTML:

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

He agregado estas definiciones de CSS:

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

Funciona como se esperaba en Chrome / Safari, tal vez también en otros navegadores, pero no lo he comprobado.




Con respecto a todas las soluciones anteriores, pero esta parece ser más válida debido a las especificaciones de HTML:

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

ACTUALIZACIÓN: Perdónenme por esta respuesta incorrecta, esta definitivamente no es una solución de marcador de posición para el elemento select , sino un título para las opciones agrupadas en la lista de elementos select .




Esa solución también funciona en Firefox:
Sin ningún 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>




Algo como esto tal vez?

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

Ejemplo de trabajo: http://jsfiddle.net/Zmf6t/




aquí esta el mio

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>




No es necesario ningún JS o CSS, solo 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>

no muestra la opción en absoluto, solo establece el valor de la opción como el valor predeterminado.

Sin embargo, si simplemente no te gusta un marcador de posición que sea del mismo color que el resto , puedes arreglarlo en línea así:

<!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, puede separar las funciones y al menos el CSS de los seleccionados en archivos separados.

Nota: la función de carga corrige un error de actualización.




Aquí hay una solución de CSS que funciona maravillosamente. El contenido se agrega (y se coloca absolutamente en relación con el contenedor) después del elemento contenedor (a través de: después de la pseudoclase ). Obtiene su texto del atributo de marcador de posición que definí en el que usé la directiva ( attr (marcador de posición) ). Otro factor clave son los eventos de puntero: ninguno : esto permite que los clics en el texto del marcador de posición pasen a la selección. De lo contrario, no se desplegará si el usuario hace clic en el texto.

Agrego la clase .empty en mi directiva select pero normalmente encuentro que angular añade / quita .ng-empty para mí (supongo que es b / c estoy inyectando la versión 1.2 de Angular en mi muestra de código)

(La muestra también muestra cómo ajustar los elementos HTML en angularJS para crear sus propias entradas personalizadas)

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>




Related