html ändern Wie erstelle ich einen Platzhalter für eine 'Auswahl' Box?




wordpress title tag ändern (15)

Es gibt keine Notwendigkeit für JS oder CSS, nur 3 Attribute:

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

Es zeigt die Option überhaupt nicht an, sondern legt nur den Wert der Option als Standard fest.

Wenn Ihnen jedoch ein Platzhalter nicht gefällt, der dieselbe Farbe wie der Rest hat , können Sie ihn wie folgt korrigieren:

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

Offensichtlich können Sie die Funktionen und zumindest das CSS des Selects in separate Dateien aufteilen.

Hinweis: Die Onload-Funktion korrigiert einen Aktualisierungsfehler.

Ich verwende Platzhalter für Texteingaben, die gut funktionieren. Aber ich möchte auch einen Platzhalter für meine Selectboxen verwenden. Natürlich kann ich nur diesen Code verwenden:

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

Aber die 'Wähle deine Option' ist in Schwarz statt in Hellgrau. Also könnte meine Lösung möglicherweise CSS-basiert sein. jQuery ist auch in Ordnung.

Dies macht die Option nur im Dropdown-Menü grau (also nach dem Klicken auf den Pfeil):

option:first {
    color: #999;
}

Bearbeiten: Die Frage ist: Wie erstellen Menschen Platzhalter in Selectboxen? Aber es wurde bereits beantwortet, Prost.

Dies führt dazu, dass der ausgewählte Wert immer grau ist (selbst nach Auswahl einer echten Option):

select {
    color:#999;
}

Ich habe gerade versteckte Attribut in der Option wie unten hinzugefügt, Es funktioniert gut für mich.

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>


Bin gerade über diese Frage gestolpert, hier ist was in FireFox & Chrome funktioniert (zumindest)

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

Die Option Deaktiviert verhindert, dass die <option> mit Maus und Tastatur ausgewählt wird, während die Verwendung von 'display:none' dem Benutzer die Auswahl über die Tastaturpfeile ermöglicht. Der 'display:none' -Stil lässt das Listenfeld einfach "nett" aussehen.

Hinweis: Wenn ein leeres Wertattribut für die Option "Platzhalter" verwendet wird, kann die Validierung (erforderliches Attribut) mit dem "Platzhalter" umgehen, wenn die Option nicht geändert, aber benötigt wird. Der Browser sollte den Benutzer auffordern, eine Option aus der Liste auszuwählen.

Update (Juli 2015):

Diese Methode wurde in folgenden Browsern bestätigt:

  • Google Chrome - v.43.0.2357.132
  • Mozilla Firefox - v.39.0
  • Safari - v.8.0.7 (Platzhalter ist im Dropdown-Menü sichtbar, aber nicht auswählbar)
  • Microsoft Internet Explorer - v.11 (Platzhalter ist im Dropdown-Menü sichtbar, aber nicht auswählbar)
  • Project Spartan - v.15.10130 (Platzhalter ist im Dropdown-Menü sichtbar, aber nicht auswählbar)

Update (Oktober 2015):

Das style="display: none" wurde zugunsten des HTML5-Attributs hidden das breite Unterstützung bietet. Das hidden Element hat ähnliche Eigenschaften wie die display: none in Safari, IE, (Project Spartan muss überprüft werden), wobei die option im Dropdown-Menü sichtbar, aber nicht auswählbar ist.

Update (Januar 2016):

Wenn das select Element required , ermöglicht es die Verwendung der :invalid CSS-Pseudoklasse, die es Ihnen ermöglicht, das select Element im "placeholder" -Zustand zu stylen. :invalid funktioniert hier wegen des leeren Wertes in der Platzhalteroption.

Sobald ein Wert festgelegt wurde, wird die :invalid Pseudoklasse gelöscht. Sie können optional auch verwenden :valid wenn Sie dies wünschen.

Die meisten Browser unterstützen diese Pseudo-Klasse. IE10 +. Dies funktioniert am besten mit benutzerdefinierten select Elementen; In einigen Fällen (z. B. Mac in Chrome / Safari) müssen Sie die Standardansicht des select ändern select damit bestimmte Stile, z. B. background-color , angezeigt werden. Sie können einige Beispiele und mehr über die Kompatibilität bei developer.mozilla.org .

Natives Aussehen des Elements Mac in Chrome:

Verwenden des geänderten Randelements Mac in Chrome:


Hier ist mein Beitrag. HAML + Kaffeescript + 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 ist möglich, nur CSS zu verwenden, indem Sie den Servercode ändern und nur die Klassenstile abhängig vom aktuellen Wert der Eigenschaft festlegen, aber dieser Weg scheint einfacher und sauberer zu sein.

$('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>

Sie können mehr CSS hinzufügen ( select option:first-child ), um den Platzhalter beim Öffnen grau zu halten, aber das war mir egal.


Für ein Pflichtfeld gibt es in modernen Browsern eine reine CSS-Lösung:

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>


Ich sehe Anzeichen für richtige Antworten, aber um alles zusammen zu bringen, wäre dies meine Lösung.

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>


Ich hatte das gleiche Problem und während der Suche kam ich auf diese Frage, und nachdem ich eine gute Lösung für mich gefunden hatte, würde ich es gerne mit euch teilen, falls jemand davon profitieren könnte. hier ist es: 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");
});

Nachdem der Kunde zunächst keine graue Farbe auswählen place_holder entfernt JS die Klasse place_holder . Ich hoffe, das hilft jemandem :)

Update: Dank @ user1096901, als ein Problem für den IE-Browser, können place_holder Klasse place_holder wieder hinzufügen, falls die erste Option erneut ausgewählt wird :)


Sie können dies tun, ohne Javascript nur mit HTML Sie müssen die Standardauswahloption disabled="" und selected="" und tag required="". auswählen required="". Im Browser kann der Benutzer das Formular nicht senden, ohne eine Option auszuwählen.

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

Ich konnte momentan keine davon zur Arbeit bekommen, weil es für mich (1) nicht erforderlich ist und (2) die Option zum Zurücksetzen auf die Standardeinstellungen benötigt. Also hier ist eine schwere Hand Option, wenn Sie jquery verwenden:

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>


Wie wäre es mit einer nicht CSS - keine Javascript / jQuery Antwort?

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


Hier ist eine CSS- Lösung, die wunderbar funktioniert. Der Inhalt wird nach dem enthaltenden Element hinzugefügt (und absolut relativ zum Container positioniert) ( via: nach der Pseudo-Klasse ). Es erhält seinen Text von dem Platzhalterattribut, das ich definiert habe, wo ich die Anweisung verwendet habe ( attr (Platzhalter) ). Ein weiterer Schlüsselfaktor sind Zeiger-Ereignisse: keine - dies ermöglicht Klicks auf den Platzhaltertext zum Auswählen. Andernfalls wird es nicht herunterfallen, wenn der Benutzer auf den Text klickt.

Ich füge die .empty- Klasse selbst in meine select-Direktive ein, aber normalerweise finde ich, dass eckle für mich hinzufügt / entfernt .g-empty (ich nehme an, dass es b / c ist. Ich injiziere Version 1.2 von Angular in meinem Codebeispiel)

(Das Beispiel zeigt auch, wie HTML-Elemente in angularJS eingebunden werden, um eigene benutzerdefinierte Eingaben zu erstellen.)

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>


So etwas vielleicht?

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

Arbeitsbeispiel: http://jsfiddle.net/Zmf6t/


In Bezug auf alle oben genannten Lösungen, aber diese scheint aufgrund der HTML-Spezifikationen am besten zu sein:

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

UPDATE: Entschuldigen Sie mich für diese falsche Antwort, dies ist definitiv keine Platzhalterlösung für das select Element, sondern ein Titel für gruppierte Optionen unter der geöffneten select Element-Liste.


Eine andere Möglichkeit in 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


Diese Lösung funktioniert auch in FireFox:
Ohne 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>





placeholder