@charset "utf-8";
/* CSS Document */
/* remove standard-styles      aus  https://blog.kulturbanause.de/2015/03/formular-styling-mit-css-select-listen-radio-buttons-und-checkboxen-individuell-gestalten/ 
Die individuelle Gestaltung von Select-Listen ist einfach. Über den appearance-Befehl entfernen wir zunächst das Standard-Styling.
*/
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  font-size: 1em;
  width: 100%
} 

/* Anschließend gestalten wir das Element mit CSS unseren Vorstellungen entsprechend. Ein individuelles Pfeil-Icon weisen wir in diesem Beispiel als CSS-background-image zu – eine DataURI bietet sich ebenfalls an.    
styling */
select {
  width:100%; font-weight:bold;
  border: 1px solid #bbb;
  padding:0 0 0 0;/**/
  box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2);
  background-color:white;
  background-image: url(../images/allgemein/hgPfeil1.png);
  background-position: right;
  background-repeat: no-repeat;
  margin-bottom:3px;
}

select:hover {
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); 
}

/* Damit der Internet Explorer 10 den Pfeil des Browsers ebenfalls verliert, ist ein kleiner Hack nötig.    hide browser-styling (arrow) in IE10 */
select::-ms-expand {
  display:none;
}

/* Die inkompatiblen Browser (IE8 & IE9) identifizieren wir hier mit einer CSS-Klasse, die über einen Conditional Comment eingefügt wurde. Auch hier sind verschiedene Herangehensweisen denkbar. Wir entfernen somit die Pfeil-Grafik, da ansonsten zwei Pfeile in der Select-Liste angezeigt würden.  */
.lt-ie10 select {
    background-image: none;
}

/*  Mit folgendem Code erreicht ihr daher im Firefox eine Darstellung wie im Screenshot zu sehen: */
select {
  /* irrelevante Eigenschaften gekürzt */
  border: 1px solid black;
  /*padding:0.75em 0.5em 0.5em 1em;*/
padding:5px 0 2px 0;
  box-shadow: 0 2px 1px 0 rgba(0,0,0,1);
 /* background-color:#333;*/
 background-color: #000066;
 font-size:16px;
  color:white;
}


option {
  /*background:#222;*/
  background: #003366; font-size:16px;
  border-top:10px solid #444; 
 padding:.3em 1em .3em 1em;
 /*padding:5% 1em; height:150px;*/ 
}