Andrin Spitzer
Mitglied
Guten Tag.
Ist es möglich eine Option zu stylen?also die Auswahl grösser zu machen etc.?
Grüsse
Ist es möglich eine Option zu stylen?also die Auswahl grösser zu machen etc.?
Grüsse
Folge dem Video um zu sehen, wie unsere Website als Web-App auf dem Startbildschirm installiert werden kann.
Anmerkung: Diese Funktion ist in einigen Browsern möglicherweise nicht verfügbar.
.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.')
}
(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>