html - otra - ¿Cómo hago un marcador de posición para un cuadro ''seleccionar''?
title html css (23)
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
Javascriptusando soloHTML. Debe configurar la opción de selección predeterminadadisabled=""yselected=""y seleccionar la etiquetarequired="".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>
¿Qué tal un no CSS - no javascript / jQuery respuesta?
<select>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</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í está mi contribución. HAML + Coffeescript + SCSS
HAML =f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t(''user.country'')}, class: ''form-control''
Coffeescript
$(''select'').on ''change'', ->
if $(this).val()
$(this).css(''color'', ''black'')
else
$(this).css(''color'', ''gray'')
$(''select'').change()
SCSS
select option {
color: black;
}
Es posible usar solo CSS cambiando el código del servidor y solo configurando los estilos de clase dependiendo del valor actual de la propiedad, pero de esta manera parece más fácil y limpio.
$(''select'').on(''change'', function() {
if ($(this).val()) {
return $(this).css(''color'', ''black'');
} else {
return $(this).css(''color'', ''gray'');
}
});
$(''select'').change();
select option {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="user[country_id]" id="user_country_id">
<option value="">Country</option>
<option value="231">United States</option>
<option value="1">Andorra</option>
<option value="2">Afghanistan</option>
<option value="248">Zimbabwe</option></select>
Puedes agregar más CSS ( select option:first-child ) para mantener el marcador de posición en gris cuando se abre, pero eso no me importó.
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>
El usuario no debe ver el marcador de posición en las opciones de selección. Sugiero usar el atributo hidden para la opción de marcador de posición y no necesita el atributo selected para esta opción, solo puede ponerlo como el primero.
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>
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");
}
});
Me topé 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 selección de la <option> con el mouse y el teclado, mientras que el uso de ''display:none'' permite al usuario seleccionar mediante las flechas del teclado. El estilo ''display:none'' solo hace que el cuadro de lista se vea ''agradable''.
Nota: El uso de un atributo de value vacío en la opción "marcador de posición" permite que la validación (atributo requerido) evite tener el "marcador de posición", por lo que si la opción no se cambia pero es necesaria; el navegador debe indicar 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 (El marcador de posición está visible en el menú desplegable pero no se puede seleccionar)
- Microsoft Internet Explorer - v.11 (el marcador de posición está visible en el menú desplegable pero no se puede seleccionar)
- Project Spartan - v.15.10130 (El marcador de posición está visible en el menú desplegable pero no se puede seleccionar)
Actualización (octubre 2015):
Se eliminó el style="display: none" en favor del atributo HTML5 hidden que tiene un amplio soporte. El elemento hidden tiene rasgos similares a los de la display: none en Safari, IE, (el Proyecto Spartan necesita verificación) donde la option está visible en el menú desplegable pero no se puede seleccionar.
Actualización (enero 2016):
Cuando se required elemento de select se permite el uso de la :invalid CSS :invalid , que le permite aplicar un estilo al elemento de select cuando está en el estado "marcador de posición". :invalid funciona aquí debido al valor vacío en la option marcador de posición.
Una vez que se haya establecido un valor, se eliminará la pseudo-clase :invalid . Opcionalmente también puede utilizar :valid si así lo desea.
La mayoría de los navegadores soportan esta pseudo-clase. IE10 +. Esto funciona mejor con elementos select estilo personalizado; En algunos casos, es decir, (Mac en Chrome / Safari), deberá cambiar la apariencia predeterminada del cuadro de select para que ciertos estilos se muestren, es decir, el color background-color , el color . Puede encontrar algunos ejemplos y más sobre la compatibilidad en developer.mozilla.org .
Elemento nativo apariencia Mac en Chrome:
Usando el elemento de borde alterado Mac en Chrome:
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"}, "▼", 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>
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.
No pude hacer que ninguno de estos funcionara actualmente, porque para mí no es necesario (1) y (2) necesita la opción de volver a la selección predeterminada. Así que aquí hay una opción de mano dura si estás 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>
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'');
}
});
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>
Quería que el SELECT estuviera en gris hasta que fuera seleccionado para este fragmento de HTML:
<select>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>
He añadido 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.
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 :)
Veo signos de respuestas correctas, pero si lo juntamos, esta sería mi solución.
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>
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.