# <Select> <option> stylen



## Andrin Spitzer (21. Juni 2017)

Guten Tag.

Ist es möglich eine Option zu stylen?also die Auswahl grösser zu machen etc.? 

Grüsse


----------



## sheel (21. Juni 2017)

Hi

wie bereits gesagt, select/option ist nicht stylebar. Generell fehlt HTML da einiges in den Bereich, zB. Comboboxen gibts gar nicht...


----------



## Andrin Spitzer (22. Juni 2017)

Gibt es eine select ähnliche möglichkeit mit den selben funtionen bei der es möglich ist?


----------



## sheel (22. Juni 2017)

http://github.hubspot.com/select/docs/welcome/
http://selectric.js.org/
...


----------



## Andrin Spitzer (6. Juli 2017)

Hay hab da was passendes gefunden allerdings zerstört das script mein desing und ich weiss nicht wie ich das so anpassen kan das es klappt:

dises css macht das die 2 div boxen nebeneinander sind:


```
.anzahl {
    -webkit-transition:     all 0.30s ease-in-out;
    -moz-transition:        all 0.30s ease-in-out;
    -ms-transition:         all 0.30s ease-in-out;
    -o-transition:          all 0.30s ease-in-out;
    box-sizing:             border-box;
    -webkit-box-sizing:     border-box;
    -moz-box-sizing:        border-box;
    background-color:       #fff;
    width:                  20%;
    margin-left:            1.4%;
    margin-bottom:          1.8%;
    transition:             box-shadow 1s;
    border:                 1px solid #eee;
    padding:                3%;
    font:                   95% Arial, Helvetica, sans-serif;
    box-shadow:             0 0 20px rgba(0,0,0,0.8);
    color:                  #888888;
}

.shop-box-more {
    -webkit-transition:     all 0.30s ease-in-out;
    -moz-transition:        all 0.30s ease-in-out;
    -ms-transition:         all 0.30s ease-in-out;
    -o-transition:          all 0.30s ease-in-out;
    box-sizing:             border-box;
    -webkit-box-sizing:     border-box;
    -moz-box-sizing:        border-box;
    background-color:       #fff;
    width:                  46%;
    margin-left:            1.4%;
    margin-bottom:          1.8%;
    transition:             box-shadow 1s;
    border:                 1px solid #eee;
    padding:                3%;
    font:                   95% Arial, Helvetica, sans-serif;
    box-shadow:             0 0 20px rgba(0,0,0,0.8);
    color:                  #888888;
}
```


```
if ($('.nice-select').length == 0) {
          $(document).off('.nice_select');
        }

und vermutlich diser teil des scripts zerstört dises desing 
      } else {
        console.log('Method "' + method + '" does not exist.')
      }
```

das ganze script:

```
(function($) {

  $.fn.niceSelect = function(method) {
   
    // Methods
    if (typeof method == 'string') {     
      if (method == 'update') {
        this.each(function() {
          var $select = $(this);
          var $dropdown = $(this).next('.nice-select');
          var open = $dropdown.hasClass('open');
         
          if ($dropdown.length) {
            $dropdown.remove();
            create_nice_select($select);
           
            if (open) {
              $select.next().trigger('click');
            }
          }
        });
      } else if (method == 'destroy') {
        this.each(function() {
          var $select = $(this);
          var $dropdown = $(this).next('.nice-select');
         
          if ($dropdown.length) {
            $dropdown.remove();
            $select.css('display', '');
          }
        });
        if ($('.nice-select').length == 0) {
          $(document).off('.nice_select');
        }
      } else {
        console.log('Method "' + method + '" does not exist.')
      }
      return this;
    }
     
    // Hide native select
    this.hide();
   
    // Create custom markup
    this.each(function() {
      var $select = $(this);
     
      if (!$select.next().hasClass('nice-select')) {
        create_nice_select($select);
      }
    });
   
    function create_nice_select($select) {
      $select.after($('<div></div>')
        .addClass('nice-select')
        .addClass($select.attr('class') || '')
        .addClass($select.attr('disabled') ? 'disabled' : '')
        .attr('tabindex', $select.attr('disabled') ? null : '0')
        .html('<span class="current"></span><ul class="list"></ul>')
      );
       
      var $dropdown = $select.next();
      var $options = $select.find('option');
      var $selected = $select.find('option:selected');
     
      $dropdown.find('.current').html($selected.data('display') || $selected.text());
     
      $options.each(function(i) {
        var $option = $(this);
        var display = $option.data('display');

        $dropdown.find('ul').append($('<li></li>')
          .attr('data-value', $option.val())
          .attr('data-display', (display || null))
          .addClass('option' +
            ($option.is(':selected') ? ' selected' : '') +
            ($option.is(':disabled') ? ' disabled' : ''))
          .html($option.text())
        );
      });
    }
   
    /* Event listeners */
   
    // Unbind existing events in case that the plugin has been initialized before
    $(document).off('.nice_select');
   
    // Open/close
    $(document).on('click.nice_select', '.nice-select', function(event) {
      var $dropdown = $(this);
     
      $('.nice-select').not($dropdown).removeClass('open');
      $dropdown.toggleClass('open');
     
      if ($dropdown.hasClass('open')) {
        $dropdown.find('.option'); 
        $dropdown.find('.focus').removeClass('focus');
        $dropdown.find('.selected').addClass('focus');
      } else {
        $dropdown.focus();
      }
    });
   
    // Close when clicking outside
    $(document).on('click.nice_select', function(event) {
      if ($(event.target).closest('.nice-select').length === 0) {
        $('.nice-select').removeClass('open').find('.option'); 
      }
    });
   
    // Option click
    $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) {
      var $option = $(this);
      var $dropdown = $option.closest('.nice-select');
     
      $dropdown.find('.selected').removeClass('selected');
      $option.addClass('selected');
     
      var text = $option.data('display') || $option.text();
      $dropdown.find('.current').text(text);
     
      $dropdown.prev('select').val($option.data('value')).trigger('change');
    });

    // Keyboard events
    $(document).on('keydown.nice_select', '.nice-select', function(event) {   
      var $dropdown = $(this);
      var $focused_option = $($dropdown.find('.focus') || $dropdown.find('.list .option.selected'));
     
      // Space or Enter
      if (event.keyCode == 32 || event.keyCode == 13) {
        if ($dropdown.hasClass('open')) {
          $focused_option.trigger('click');
        } else {
          $dropdown.trigger('click');
        }
        return false;
      // Down
      } else if (event.keyCode == 40) {
        if (!$dropdown.hasClass('open')) {
          $dropdown.trigger('click');
        } else {
          var $next = $focused_option.nextAll('.option:not(.disabled)').first();
          if ($next.length > 0) {
            $dropdown.find('.focus').removeClass('focus');
            $next.addClass('focus');
          }
        }
        return false;
      // Up
      } else if (event.keyCode == 38) {
        if (!$dropdown.hasClass('open')) {
          $dropdown.trigger('click');
        } else {
          var $prev = $focused_option.prevAll('.option:not(.disabled)').first();
          if ($prev.length > 0) {
            $dropdown.find('.focus').removeClass('focus');
            $prev.addClass('focus');
          }
        }
        return false;
      // Esc
      } else if (event.keyCode == 27) {
        if ($dropdown.hasClass('open')) {
          $dropdown.trigger('click');
        }
      // Tab
      } else if (event.keyCode == 9) {
        if ($dropdown.hasClass('open')) {
          return false;
        }
      }
    });

    // Detect CSS pointer-events support, for IE <= 10. From Modernizr.
    var style = document.createElement('a').style;
    style.cssText = 'pointer-events:auto';
    if (style.pointerEvents !== 'auto') {
      $('html').addClass('no-csspointerevents');
    }
   
    return this;

  };

}(jQuery));
```



```
<select class="shop-box-more select" name="SSD">

                <option data-preis="0"       selected>Festplatte SSD</option>
                <option data-preis="0"       >Keine</option>
                <option data-preis="97"      value="Samsung SSD 850 EVO 250GB">Samsung SSD 850 EVO 250GB</option>
                <option data-preis="173"     value="Samsung SSD 850 EVO 500GB">Samsung SSD 850 EVO 500GB</option>
                <option data-preis="139"     value="Samsung SSD 850 EVO 256GB">Samsung SSD 850 EVO 256GB</option>
                <option data-preis="245"     value="Samsung SSD 850 EVO 512GB">Samsung SSD 850 EVO 512GB</option>
                <option data-preis="96"      value="WD Blue SSD 850 EVO 250GB">WD Blue SSD 850 EVO 250GB</option>
                <option data-preis="156"     value="WD Blue SSD 850 EVO 500GB">WD Blue SSD 850 EVO 500GB</option>
                <option data-preis="96"      value="WD Blue SSD 850 EVO 250GB">WD Blue SSD 850 EVO 250GB</option>
                <option data-preis="156"     value="WD Blue SSD 850 EVO 500GB">WD Blue SSD 850 EVO 500GB</option>
                <option data-preis="74"      value="Intel 540s SSD 120GB">Intel 540s SSD 120GB</option>
                <option data-preis="110"     value="Intel 540s SSD 240GB">Intel 540s SSD 240GB</option>
                <option data-preis="198"     value="Intel 540s SSD 480GB">Intel 540s SSD 480GB</option>
                <option data-preis="359"     value="Intel 540s SSD 1TB">Intel 540s SSD 1TB</option>
            </select>
            <select class="select anzahl" name="ssd-a">
                <option data-preis="0"       selected>Anzahl</option>
                <option data-preis=""        value="1x">1x</option>
                <option data-preis=""        value="2x">2x</option>
                <option data-preis=""        value="3x">3x</option>
            </select>
```


ich hoffe ihr seht das problem und könnt mir helfen das ganze ist provisorisch hier anzusehen modpc.spitzinet.ch


----------



## Prexioc (24. September 2017)

Hallo Ich bin ein neuer Coder, ich habe gerade erst begonnen, html zu lernen. Bitte wie füge ich die Sprache auf meine Webseite ein? wie färbe ich meine fonts Welche Codes benutze ich?


----------

