html - tag - select2 placeholder




如何為“選擇”框創建佔位符? (12)

您可以在不使用HTML情況下使用HTML來執行此操作。您需要設置默認選擇選項disabled=""selected=""並選擇tag required="". 瀏覽器不允許用戶在未選擇任何選項的情況下提交表單。

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

我正在使用佔位符來處理文本輸入問題。 但我想為我的選擇框使用佔位符。 當然,我可以使用這個代碼:

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

但'選擇你的選擇'是黑色的,而不是淺灰色。 所以我的解決方案可能是基於CSS的。 jQuery也很好。

這只會使選項在下拉菜單中變成灰色(所以點擊箭頭後):

option:first {
    color: #999;
}

編輯:問題是:人們如何在選擇框中創建佔位符? 但它已經回答,歡呼。

並且使用這個結果,選定的值總是灰色的(即使在選擇一個真實選項後):

select {
    color:#999;
}

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


只是偶然發現了這個問題,這裡是FireFox和Chrome(至少)的作品,

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

Disabled選項用於停止使用鼠標和鍵盤選擇的<option> ,而使用'display:none'允許用戶仍然通過鍵盤箭頭進行選擇。 'display:none'風格只是讓列錶框看起來很不錯。

注意:在“佔位符”選項上使用空value屬性允許驗證(必需屬性)解決擁有“佔位符”的問題,因此如果該選項未被更改但是是必需的; 瀏覽器應該提示用戶從列表中選擇一個選項。

更新(2015年7月):

此方法已在下列瀏覽器中得到確認:

  • Google Chrome - v.43.0.2357.132
  • Mozilla Firefox - v.39.0
  • Safari - v.8.0.7(佔位符在下拉菜單中可見,但不可選)
  • Microsoft Internet Explorer - v.11(佔位符在下拉菜單中可見,但不可選)
  • Project Spartan - v.15.10130(佔位符在下拉菜單中可見,但不可選)

更新(2015年10月):

刪除了style="display: none"以支持hidden的HTML5屬性,它具有廣泛的支持。 hidden元素與display: none相似display: none在Safari,IE中display: none (Spartan項目需要檢查) option在下拉列表中可見,但不可選。

更新(2016年1月):

required select元素required它允許使用:invalid CSS偽類,它允許您在處於“佔位符”狀態時對select元素進行樣式設置。 :invalid由於佔位符option中的空值,此處:invalid

一旦設置了一個值:invalid偽類將被丟棄。 您可以選擇使用:valid如果您願意,請使用:valid

大多數瀏覽器都支持這個偽類。 IE10 +。 這最適合自定義樣式的select元素; 在某些情況下(即Chrome / Safari中的Mac),您需要更改select框的默認外觀,以便某些樣式顯示為background-colorcolor 。 你可以在developer.mozilla.org找到一些關於兼容性的例子。

Chrome中的本機元素外觀Mac:

在Chrome中使用改變的邊框元素Mac:


對於一個必需的領域,現代瀏覽器中有一個純粹的CSS解決方案:

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>


我在下面的選項中添加了隱藏屬性,它對我來說工作得很好。

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


我希望SELECT在選擇HTML之前是灰色的:

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

我已經添加了這些CSS定義:

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

它在Chrome / Safari中按預期工作,也可能在其他瀏覽器中運行,但我沒有檢查。


我看到了正確答案的跡象,但將它們結合在一起,這將是我的解決方案。

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>


我遇到了同樣的問題,在搜索過程中遇到了這個問題,在找到了我的好解決方案之後,我想與大家分享一些問題,以免某些人可以從中受益。 這裡是: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");
});

在客戶首先選擇不需要灰色後,JS就會刪除類place_holder 。 我希望這可以幫助別人 :)

更新:感謝@ user1096901,作為IE瀏覽器的解決方案,如果再次選擇第一個選項,則可以再次添加place_holder類:)


該解決方案也適用於FireFox:
沒有任何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>


這是一個精美的CSS解決方案。 內容被添加(並且相對於容器絕對定位)在包含元素之後( 通過:在偽類之後 )。 它從占位符屬性中獲取我使用指令( attr(placeholder) )定義的位置的文本。 另一個關鍵因素是指針事件:無 - 這可以讓佔位符文本上的點擊通過選擇。 否則,如果用戶單擊文本,它將不會下降。

我在我的select指令中自己添加.empty類,但通常我會發現角度為我添加/刪除.ng-empty (我假設它是b / c我在我的代碼示例中註入了Angular版本1.2)

(該示例還演示瞭如何在angularJS中打包HTML元素以創建您自己的自定義輸入)

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>


這是我的貢獻。 HAML +咖啡標+ 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;
}

通過更改服務器代碼並僅根據屬性的當前值設置類樣式,可以僅使用CSS,但這種方式看起來更簡單和更清晰。

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

您可以添加更多CSS( select option:first-child ),以便在佔位符打開時保持灰色,但我並不在意。


這樣的事情可能嗎?

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

工作示例: http://jsfiddle.net/Zmf6t/ : http://jsfiddle.net/Zmf6t/







placeholder