pagina - title label html




¿Cómo hago un marcador de posición para un cuadro 'seleccionar'? (16)

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

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

Pero el 'Seleccione su opción' está en negro en lugar de gris claro. Así que mi solución podría estar basada en CSS. jQuery también está bien.

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

option:first {
    color: #999;
}

Edición: la pregunta es: ¿cómo crean las personas marcadores de posición en los cuadros de selección? Pero ya se ha contestado, saludos.

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

select {
    color:#999;
}

Puede hacer esto sin usar Javascript usando solo HTML . Debe configurar la opción de selección predeterminada disabled="" y selected="" y seleccionar la etiqueta required="". El navegador no permite al usuario enviar el formulario sin seleccionar una opción.

<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>

Introduzca [type="text"] marcador de posición de estilo para elementos seleccionados

La siguiente solución simula un marcador de posición en relación con un 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>


Acabo de agregar un atributo oculto en la opción como abajo, está funcionando bien para mí.

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</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í hay una solución CSS que funciona a la perfección. El contenido se agrega (y se posiciona absolutamente en relación con el contenedor) después del elemento contenedor (a través de: after pseudo-class ). Obtiene su texto del atributo de marcador de posición que definí donde 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.

Yo agrego la clase .empty en mi directiva de selección, pero normalmente encuentro que agrega / elimina angular .ng-empty (supongo que es b / c Estoy inyectando la versión 1.2 de Angular en mi ejemplo de código)

(El ejemplo también muestra cómo envolver 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>


Aquí he modificado la respuesta de David (respuesta aceptada). En su respuesta, puso el atributo deshabilitado y seleccionado en la etiqueta de opción, pero cuando también colocamos una etiqueta oculta, se verá mucho mejor. Al agregar un atributo oculto adicional en la etiqueta de opción, evitará que la opción "Seleccione su opción" se vuelva a seleccionar después de que se seleccione la opción "Durr".

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


Esa solución funciona también 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>


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

No estoy contento con las soluciones solo HTML / CSS, por lo que decidí crear una select personalizada utilizando JS.

Esto es algo que he escrito en los últimos 30 minutos, por lo que se puede mejorar aún más.

Todo lo que tienes que hacer es crear una lista simple con pocos atributos de datos. El código convierte automáticamente la lista en un menú desplegable seleccionable. También agrega una input oculta para mantener el valor seleccionado, por lo que se puede utilizar en un formulario.

Entrada:

<ul class="select" data-placeholder="Role" data-name="role">
  <li data-value="admin">Administrator</li>
  <li data-value="mod">Moderator</li>
  <li data-value="user">User</li>
</ul>

Salida:

<div class="ul-select-container">
    <input type="hidden" name="role" class="hidden">
    <div class="selected placeholder">
        <span class="text">Role</span>
        <span class="icon">▼</span>
    </div>
    <ul class="select" data-placeholder="Role" data-name="role">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

El texto del elemento que se supone que es un marcador de posición está en gris. El marcador de posición es seleccionable, en caso de que el usuario quiera revertir su elección. También utilizando CSS, se pueden superar todos los inconvenientes de la select (por ejemplo, la incapacidad del estilo de las opciones).

// helper function to create elements faster/easier
// https://github.com/akinuri/js-lib/blob/master/element.js
var elem = function(tagName, attributes, children, isHTML) {
  let parent;
  if (typeof tagName == "string") {
    parent = document.createElement(tagName);
  } else if (tagName instanceof HTMLElement) {
    parent = tagName;
  }
  if (attributes) {
    for (let attribute in attributes) {
      parent.setAttribute(attribute, attributes[attribute]);
    }
  }
  var isHTML = isHTML || null;
  if (children || children == 0) {
    elem.append(parent, children, isHTML);
  }
  return parent;
};
elem.append = function(parent, children, isHTML) {
  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {
    if (children instanceof Text || typeof children == "string" || typeof children == "number") {
      parent.value = children;
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  } else {
    if (children instanceof HTMLElement || children instanceof Text) {
      parent.appendChild(children);
    } else if (typeof children == "string" || typeof children == "number") {
      if (isHTML) {
        parent.innerHTML += children;
      } else {
        parent.appendChild(document.createTextNode(children));
      }
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  }
};


// initialize all selects on the page
$("ul.select").each(function() {
  var parent    = this.parentElement;
  var refElem   = this.nextElementSibling;
  var container = elem("div", {"class": "ul-select-container"});
  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});
  var selected  = elem("div", {"class": "selected placeholder"}, [
    elem("span", {"class": "text"}, this.dataset.placeholder),
    elem("span", {"class": "icon"}, "&#9660;", true),
  ]);
  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);
  this.insertBefore(placeholder, this.children[0]);
  container.appendChild(hidden);
  container.appendChild(selected);
  container.appendChild(this);
  parent.insertBefore(container, refElem);
});

// update necessary elements with the selected option
$(".ul-select-container ul li").on("click", function() {
  var text     = this.innerText;
  var value    = this.dataset.value || "";
  var selected = this.parentElement.previousElementSibling;
  var hidden   = selected.previousElementSibling;
  hidden.value = selected.dataset.value = value;
  selected.children[0].innerText = text;
  if (this.classList.contains("placeholder")) {
    selected.classList.add("placeholder");
  } else {
    selected.classList.remove("placeholder");
  }
  selected.parentElement.classList.remove("visible");
});

// open select dropdown
$(".ul-select-container .selected").on("click", function() {
  if (this.parentElement.classList.contains("visible")) {
    this.parentElement.classList.remove("visible");
  } else {
    this.parentElement.classList.add("visible");
  }
});

// close select when focus is lost
$(document).on("click", function(e) {
  var container = $(e.target).closest(".ul-select-container");
  if (container.length == 0) {
    $(".ul-select-container.visible").removeClass("visible");
  }
});
.ul-select-container {
  width: 200px;
  display: table;
  position: relative;
  margin: 1em 0;
}
.ul-select-container.visible ul {
  display: block;
  padding: 0;
  list-style: none;
  margin: 0;
}
.ul-select-container ul {
  background-color: white;
  border: 1px solid hsla(0, 0%, 60%);
  border-top: none;
  -webkit-user-select: none;
  display: none;
  position: absolute;
  width: 100%;
  z-index: 999;
}
.ul-select-container ul li {
  padding: 2px 5px;
}
.ul-select-container ul li.placeholder {
  opacity: 0.5;
}
.ul-select-container ul li:hover {
  background-color: dodgerblue;
  color: white;
}
.ul-select-container ul li.placeholder:hover {
  background-color: rgba(0, 0, 0, .1);
  color: initial;
}
.ul-select-container .selected {
  background-color: white;
  padding: 3px 10px 4px;
  padding: 2px 5px;
  border: 1px solid hsla(0, 0%, 60%);
  -webkit-user-select: none;
}
.ul-select-container .selected {
  display: flex;
  justify-content: space-between;
}
.ul-select-container .selected.placeholder .text {
  color: rgba(0, 0, 0, .5);
}
.ul-select-container .selected .icon {
  font-size: .7em;
  display: flex;
  align-items: center;
  opacity: 0.8;
}
.ul-select-container:hover .selected {
  border: 1px solid hsla(0, 0%, 30%);
}
.ul-select-container:hover .selected .icon {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="select" data-placeholder="Role" data-name="role">
  <li data-value="admin">Administrator</li>
  <li data-value="mod">Moderator</li>
  <li data-value="user">User</li>
</ul>

<ul class="select" data-placeholder="Sex" data-name="sex">
  <li data-value="male">Male</li>
  <li data-value="female">Female</li>
</ul>

Actualización : He mejorado esto (selección usando las teclas arriba / abajo / ingresar). Se ordenó un poco la salida y se convirtió en un objeto. Salida de corriente:

<div class="li-select-container">
    <input type="text" readonly="" placeholder="Role" title="Role">
    <span class="arrow">▼</span>
    <ul class="select">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

Inicialización:

new Liselect(document.getElementsByTagName("ul")[0]);

Para un examen más detallado: JSFiddle , GitHub (renombrado).

Actualización: reescrito esto de nuevo. En lugar de usar una lista, solo podemos usar una selección. De esta manera funcionará incluso sin JS (en caso de que esté deshabilitado).

Entrada:

<select name="role" data-placeholder="Role" required title="Role">
    <option value="admin">Administrator</option>
    <option value="mod">Moderator</option>
    <option>User</option>
</select>

new Advancelect(document.getElementsByTagName("select")[0]);

Salida:

<div class="advanced-select">
    <input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">
    <span class="arrow">▼</span>
    <ul>
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li>User</li>
    </ul>
</div>

JSFiddle , GitHub .


No hay necesidad de 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, solo establece el valor de la opción como predeterminado.

Sin embargo, si simplemente no te gusta un marcador de posición del mismo color que el resto , puedes corregirlo en línea de la siguiente manera:

<!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 la selección en archivos separados.

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


Otra posibilidad en JS:

 $('body').on('change','select', function (ev){
    if($(this).find('option:selected').val() == ""){
        $(this).css('color','#999');
        $(this).children().css('color','black');
    }
    else {
        $(this).css('color','black');
        $(this).children().css('color','black');
    }
});

JSFiddle


Para un campo requerido, existe una solución de CSS puro en los 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>


Si estas usando angular ve asi

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


Tuve el mismo problema y, mientras buscaba, encontré esta pregunta, y después de encontrar una buena solución para mí, me gustaría compartirla con ustedes en caso de que alguien pueda beneficiarse de ella. Aquí está: HTML:

<select class="place_holder dropdown">
    <option selected="selected" style=" display: none;">Sort by</option>
    <option>two</option>
    <option>something</option>
    <option>4</option>
    <option>5</option>
</select>

CSS:

.place_holder{
    color: gray;
}
option{
    color: #000000;
}

JS:

jQuery(".dropdown").change(function () {
    jQuery(this).removeClass("place_holder");
});

Después de que el cliente realiza la primera selección, no es necesario el color gris para que JS elimine la clase place_holder . Espero que esto ayude a alguien :)

Actualización: gracias a @ user1096901, como una solución alternativa para el navegador IE, puede place_holder agregar la clase place_holder en caso de que la primera opción se seleccione de nuevo :)


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>


Con respecto a todas las soluciones anteriores, pero esta parece ser la 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óneme por esta respuesta incorrecta, esto 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 abierta.





placeholder