select>option background und border

[Carrear]

Hi meine lieben. Ich möchte das Aussehen einer Select box verändern. Ich kann keine CSS Dropdownliste erstellen, weil ich trotzdem möchte, dass auf Smartphones die typische Auflistung von Selectfeldern erhalten bleibt. Ich muss also eine richtiges Select Feld nutzen. Ich habe jetzt geschafft Hintergrund und Pfeil zu ändern indem ich es in ein Extra Div gesetzt habe und den Pfeil raus geschoben habe.

Jetzt hat allerdings der Bereich, der sich durch Klick öffnet (mit den Options drin) immernoch einen Hintergrund und reinen Rahmen !? Ich schicke mal ein paar Bilder mit zum Verständnis.

Es soll also sowohl der Hintergrund als auch die Border Transparent sein



Ich sollte dem ganzen vielleicht noch html und css hinzufügen ^^

<div class="styled-select">
	<select class="landesauswahl hessen">
		<option class="hessen"></option>
		<option class="thueringen"></option>
		<option class="niedersachsen"></option>
		<option class="berlin"></option>
	</select>
</div>

.styled-select {
	position: relative;
	height: 47px;
	line-height: 47px;
   overflow: hidden;
   background: url(../img/arrow-down-select.png) no-repeat right center #ddd;
	width: 60px;
}

.styled-select select.landesauswahl {
	position: absolute;
	top:0;
	right: -20px;
   	background: transparent;
	height: 47px;
	line-height: 47px;
   	padding: 5px;
  	border: 0;
	background-repeat: no-repeat;
	vertical-align: center;
	width: 80px;
}

select.landesauswahl option {
	height: 47px;
	line-height: 47px;
	background-repeat: no-repeat;
	display: block;
	vertical-align: center;
	overflow: hidden;
}


select.landesauswahl.hessen ,option.hessen {
	padding: 0 0 0 38px;
	background-image: url('../img/emblems/hessen.png');
}

 

[threadi]

Das select- und option-Element lässt sich leider auch heutzutage so gut wie gar nicht stylen, vor allem nicht in allen aktuellen Browsern einheitlich. Ich würde dir empfehlen eine <ul>-Liste zu verwenden und deren Ausklappen mit JavaScript zu steuern. Damit hättest Du die volle Kontrolle darüber. Abgesehen davon wäre die <ul>-Liste für deinen Anwendungsfall offenbar die richtige Wahl, da Du ja kein Formular verwendest.

 

[Carrear]

Das select- und option-Element lässt sich leider auch heutzutage so gut wie gar nicht stylen, vor allem nicht in allen aktuellen Browsern einheitlich. Ich würde dir empfehlen eine <ul>-Liste zu verwenden und deren Ausklappen mit JavaScript zu steuern. Damit hättest Du die volle Kontrolle darüber. Abgesehen davon wäre die <ul>-Liste für deinen Anwendungsfall offenbar die richtige Wahl, da Du ja kein Formular verwendest.

Danke threadu für den tipp. Ich hatte auch zuvor daran gedacht eine UL zu verwenden. Ich habe nur 1 Problem damit:

Ich bereite die Seite in der Struktur auch für eine Responsive Version vor. Wenn ich in einem Handy ein SELECT Feld anklicke, dann werden die Inhalte der Option Tags automatisch in eine ordentliche Liste am untern Bildschirmrand des Handys übernommen die mit Radio Buttons auswählbar sind. Das ist auf einem Handy einfach wesentlich besser zu bedienen als ein normales SELECT Feld und passiert automatisch - zumindest in Android und iOS.

Bei einer Liste passiert das ganze nicht

 

[threadi]

Du könntest auch für Desktop und mobile Systeme unterschiedlichen HTML-Code ausliefern, dann würde es dort auch passen (der Style sieht imho dort ohnehin anders aus).

 

[Paspirgilis]

Hi,
Ich habe mal einen Select-Redesigner gebaut den ich eigentlich ganz cool finde.

Ich paste dir einfach mal den Code rein, nutze ihn wie du möchtest. Code hab cih selbst entwickelt, gibt also keine Lizensprobleme.

Dies ist aber in einem jQueryPlugin und soll jQuery erweitern:

$.fn.redesignSelect = function(){
    var selectRedesigner = {
      selectElement: [],
      selectElementPlacebo: [],
      init: function(elem){
        if($('#min-select-styles').length == 0){
          selectRedesigner.styles();
        }
        selectRedesigner.walk(elem);
      },
      walk: function(elem){
        $(elem).each(function(){
          var selectElement = $(this);
          if(!selectElement.attr('redesigned')){
            selectElement.attr('redesigned', true);
            selectElement.before('<div class="min-select"><div class="min-select_active"></div><ul></ul></div>');
            var selectElementPlacebo = $(this).prev();
            selectElementPlacebo.children('.min-select_active').html(selectElement.children('option:selected').html());
            selectElement.children('option').each(function(){
              var option = $(this);
              var CSSclass = (option[0] == selectElement.children('option:selected')[0] ? ' class="min-select_option_selected"' : '');
              selectElementPlacebo.children('ul').append('<li' + CSSclass + ' value="' + option.val() + '">' + $.trim(option.html()) + '</li>');
            });
            selectElement.hide();
            selectElementPlacebo.children('.min-select_active').click(function(){
              selectRedesigner.toggle(selectElementPlacebo);
            });
            selectElementPlacebo.children('ul').children('li').click(function(){
              selectRedesigner.activate(selectElement, $(this));
            });
            selectElementPlacebo.children('.min-select_active').width(selectElementPlacebo.children('ul').width()-10);
            selectElementPlacebo.width(selectElementPlacebo.children('ul').width()+15);
          }
        });
      },
      toggle: function(selectElementPlacebo){
        $('.min-select ul').each(function(){
          if(this != selectElementPlacebo.children('ul')[0]){
            $(this).slideUp(100);
          }
        });
        $('.min-select').css('z-index', 1100);
        selectElementPlacebo.css('z-index', 1101).children('ul').slideToggle(200);
      },
      activate: function(selectElement, placeboListItem){
        selectElement.children().each(function(){
          if($(this).html() == placeboListItem.html()){
            $(this).attr('selected', 'selected');
          } else {
            $(this).removeProp('selected');
          }
        });
        selectElement.change();
        placeboListItem.addClass('min-select_option_selected').siblings('li').removeClass('min-select_option_selected');
        placeboListItem.parent().siblings('.min-select_active').html(placeboListItem.html());
        setTimeout(function(){
          placeboListItem.parent().slideUp()
        }, 170);
      },
      styles: function(){
        var style = '<style  type="text/CSS" id="min-select-styles">';
        style += '.min-select, .min-select *{cursor:pointer;}';
        style += '.min-select{display:inline-block;border:1px solid #999;height:20px;line-height:20px;' +
        'position:relative;z-index:1;background-color:#FFF;}';
        style += '.min-select_active{padding:0 20px 0 5px;}';
        style += '.min-select_active:before{display:block;content:"";height:0;width:0;position:absolute;top:8px;right:5px;' +
        'border: 5px solid transparent;border-top-color:#666;}';
        style += '.min-select_active:hover{background-color: #F6F6F6;}';
        style += '.min-select ul{display:none;position:absolute;top:20px;left:-1px;border:1px solid #999;' +
        'background-color:#FFF;z-index:800;min-width:100%;}';
        style += '.min-select li{padding:0 10px;line-height:20px;height:20px;display:block;white-space: nowrap; font-weight: 300;}';
        style += '.min-select li:hover{background-color:#F6F6F6;cursor:pointer;}';
        style += '.min-select li.min-select_option_selected, .min-select li.min-select_option_selected:hover{' +
        'background-color:#FFF;cursor:default;font-weight:700;}';
        if($.browser.msie && $.browser.version < 8){
          style += '.min-select{display:inline;zoom:1;width:150px;z-index:900;background-color:#FFF;}';
        }
        style += '</style>';
        $(document.body).append(style);
      }
    };
    selectRedesigner.init(this);
    return this;
  };

Auserdem kannst du mit jQuery ja ganz easy herrausfinden ob der client mobile ist oder nicht. Und dann halt den Redesigner anwerfen wenn er nicht von mobile kommt.

MfG
Mark Paspirgilis