Pseudo elements et tag SELECT

le select balise permet d'utiliser le :after sélecteur afin de créer un pseudo-élément?

J'ai essayé sur Chrome, Safari et Firefox sur Mac et cela ne semble pas fonctionner.

35
demandé sur Vadim Ovchinnikov 2014-01-14 03:40:54

3 réponses

Ici est un compromis que j'ai utilisé. http://jsfiddle.net/pht9d295/3/

<div class="select-wrapper">
    <select>
        <option>United Kingdom</option>
        <option>Canada</option>
        <option>United States</option>
    </select>
</div>

Et le CSS

body {
    background-color: #f6f6f6;
    padding: 10px;
}
.select-wrapper {
    background-color: #FFF;
    display: inline-block;
    position: relative;
}
.select-wrapper:after {
    content:"\f078";
    font-family:'FontAwesome';
    position: absolute;
    top: 13px;
    right: 10px;
    z-index: 5;
 }
select {
    padding: 10px 40px 10px 10px;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #bbb;
    background-color: transparent;
    border-radius: 0;
    position: relative;
    cursor: pointer;
    z-index: 10;
}
24
répondu user1124838 2015-06-26 10:31:48

Eh bien, il ressemble à la select les balises ne permet pas :after ou :before pseudo parce qu'ils sont personnalisés par chaque fournisseur, donc c'est assez difficile de les modifier et c'est parce qu'ils ne permettent pas :before ou :after pseudo-éléments.

Pour tout le monde qui voit cela, il ya une bonne option pour créer un custom select élément avec jQuery et modification minimale ... créer un select puis utiliser jQuery pour éditer c':

// Iterate over each select element
$('select').each(function() {
  // Cache the number of options
  var $this = $(this),
    numberOfOptions = $(this).children('option').length;

  // Hides the select element
  $this.addClass('s-hidden');

  // Wrap the select element in a div
  $this.wrap('<div class="select"></div>');

  // Insert a styled div to sit over the top of the hidden select element
  $this.after('<div class="styledSelect"></div>');

  // Cache the styled div
  var $styledSelect = $this.next('div.styledSelect');

  // Show the first select option in the styled div
  $styledSelect.text($this.children('option').eq(0).text());

  // Insert an unordered list after the styled div and also cache the list
  var $list = $('<ul />', {
    'class': 'options'
  }).insertAfter($styledSelect);

  // Insert a list item into the unordered list for each select option
  for (var i = 0; i < numberOfOptions; i++) {
    $('<li />', {
      text: $this.children('option').eq(i).text(),
      rel: $this.children('option').eq(i).val()
    }).appendTo($list);
  }

  // Cache the list items
  var $listItems = $list.children('li');

  // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
  $styledSelect.click(function(e) {
    e.stopPropagation();
    $('div.styledSelect.active').each(function() {
      $(this).removeClass('active').next('ul.options').hide();
    });
    $(this).toggleClass('active').next('ul.options').toggle();
  });

  // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
  // Updates the select element to have the value of the equivalent option
  $listItems.click(function(e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass('active');
    $this.val($(this).attr('rel'));
    $list.hide();
    /* alert($this.val()); Uncomment this for demonstration! */
  });

  // Hides the unordered list when clicking outside of it
  $(document).click(function() {
    $styledSelect.removeClass('active');
    $list.hide();
  });
});
body {
  padding: 50px;
  background-color: white;
}

.s-hidden {
  visibility: hidden;
  padding-right: 10px;
}

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font: normal 11px/22px Arial, Sans-Serif;
  color: black;
  border: 1px solid #ccc;
}

.styledSelect {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: white;
  padding: 0 10px;
  font-weight: bold;
}

.styledSelect:after {
  content: "";
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-color: black transparent transparent transparent;
  position: absolute;
  top: 9px;
  right: 6px;
}

.styledSelect:active,
.styledSelect.active {
  background-color: #eee;
}

.options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0 0;
  padding: 0 0;
  list-style: none;
  border: 1px solid #ccc;
  background-color: white;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.options li {
  padding: 0 6px;
  margin: 0 0;
  padding: 0 10px;
}

.options li:hover {
  background-color: #39f;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="selectbox1">
  <option value="">Select an option&hellip;</option>
  <option value="aye">Aye</option>
  <option value="eh">Eh</option>
  <option value="ooh">Ooh</option>
  <option value="whoop">Whoop</option>
</select>

<select id="selectbox2">
  <option value="">Month&hellip;</option>
  <option value="january">January</option>
  <option value="february">February</option>
  <option value="march">March</option>
  <option value="april">April</option>
  <option value="may">May</option>
  <option value="june">June</option>
  <option value="july">July</option>
  <option value="august">August</option>
  <option value="september">September</option>
  <option value="october">October</option>
  <option value="november">November</option>
  <option value="december">December</option>
</select>

http://jsfiddle.net/tovic/ZTHkQ/

10
répondu Patrick D'appollonio 2018-05-05 16:10:32
font-awesome. Je ne suis pas sûr à quel point elle est conviviale. Les extensions des fournisseurs ont été omises pour des raisons de brièveté.

HTML

<fieldset>
    <label for="color">Select Color</label>
    <div class="select-wrapper">
        <select id="color">
            <option>Red</option>
            <option>Blue</option>
            <option>Yellow</option>
        </select>
        <i class="fa fa-chevron-down"></i>
    </div>
</fieldset>

SCSS

fieldset {
    .select-wrapper {
        position: relative;

        select {
            appearance: none;
            position: relative;
            z-index: 1;
            background: transparent;

            + i {
                position: absolute;
                top: 40%;
                right: 15px;
            }
        }
    }

si votre élément select a une couleur de fond définie, alors cela ne fonctionnera pas car cet extrait place essentiellement L'icône Chevron derrière l'élément select (pour permettre de cliquer sur le haut de l'icône pour initier les actions de sélection).

cependant, vous pouvez style le select-wrapper à la même taille que l'élément select et style son arrière-plan pour obtenir le même effet.

Check out my CodePen pour une démo de travail qui montre ce morceau de code à la fois sur une boîte de sélection à thème sombre et clair en utilisant une étiquette régulière et une étiquette "placeholder" et d'autres styles nettoyés tels que les bordures et les largeurs.

9
répondu Tessa 2016-10-28 15:22:16