Mit CSS <Input type="text"> mit <datalist> angleichen an <select>

Webdesign & Technik HTML & CSS
1

Hallo,

Ich möchte <select> und <input> Elemente stylisch angleichen, aber leider unterstützen Browser derartige Anpassungen noch nicht. ich bin mir sicher es wurde schon 100 Mal gefragt, ich bekomme leider keine gute Lösung hin. Solche grundlegende Dinge muss doch jemand schon mal gelöst haben! Ich bitte sehr um Tipps.

  1. Der Standardpfeil bei <select> kann nicht mit padding-right:50px; nach links mitverschoben werden, daher meine Notlösung. (Bitte die Klasse „Pfeil“ löschen um es zu sehen.)
  2. Der Standardpfeil kann nicht bei <input type="text"/> mit <datalist> angepasst/entfernt werden.
  3. <datalist> lässt sich überhaupt nciht anpassen. Das wird vom Browser nicht unterstützt!

HTML:

<html>
<head>
<style type="text/css">

datalist > option { background-color:#FFEEEE; color:#000000; } /* wird leider noch nicht unterstützt*/
datalist { display:none; } /* ausblenden für ältere Browser */

input[type='text'], select { width:300px; height:24px; padding-left:12px; padding-right:12px; box-sizing:border-box;  box-sizing:border-box; border:1px solid #FF0000; border-radius:20px; }

input[type='text'], select { color:#000000; background-color:#FFEEEE; }
input[type='text']:hover, select:hover { color:#FF0000; background-color:#FFEEEE; }
input[type='text']:focus, select:focus { color:#000000; background-color:#FFFFFF; }
input[type='text']:active, select:active { color:#000000; background-color:#FFFFFF; }
input[type='text']:focus:hover, select:focus:hover { color:#000000; background-color:#FFFFFF; }

select.Pfeil { -moz-appearance:none; -webkit-appearance:none; appearance:none; } /* stil entfernen */

/* - VERSUCH - */
input.Pfeil { -moz-appearance:none; -webkit-appearance:none; appearance:none; }
/* ----------- */

/* für IE */
select:focus::-ms-value { background-color:transparent; color:#000000; } /*  farbkorrektur für dropdown */
select::-ms-expand { display:none; } /* pfeil entfernen */

/* Der Pfeil muss extra eingefügt werden. Es kann nicht automatisch unterschieden werden zwichen dropdown und mehrfach-auswahl */
select.Pfeil, input[type='text'].Pfeil { background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9J2JsYWNrJyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+'); background-repeat:no-repeat; background-position:250px 50%; }
select.Pfeil:hover, input[type='text'].Pfeil:hover { background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9J3JlZCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnPjxwYXRoIGQ9J003IDEwbDUgNSA1LTV6Jy8+PHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPjwvc3ZnPg'); background-repeat:no-repeat; background-position:250px 50%; }

select optgroup              { background-color:transparent; color:#000000; } /* Standardwert */
select option                { background-color:transparent; color:#000000; } /* Standardwert */
select option:hover          { background-color:transparent; color:#FF0000; } /* bei Drüberfahren */
select option:active         { background-color:#FF0000; color:#000000; } /* bei Drücken und Halten */
select option:checked        { background-color:#FF8888; color:#000000; } /* ausgewählte Option */
select option:checked:hover  { background-color:#FF8888; color:#000000; } /* ausgewählte Option bei Drüberfahren */
select option:checked:active { background-color:#FF0000; color:#000000; } /* ausgewählte Option bei Drücken und Halten */
</style>

</head>
<body>
<select name="Auswahl" title="Auswahl" class="Pfeil">
<optgroup label="A"/>
<option value="Apfel">Apfel</option>
<optgroup label="B"/>
<option value="Birne">Birne</option>
<optgroup label="Z"/>
<option value="Zitrone">Zitrone</option>
</select><br/>

<input type="text" name="Texteingabe" list="L" class="Pfeil"/><br/>
<datalist id="L">
<option value="Apfel">Apfel</option>
<option value="Birne">Birne</option>
<option value="Zitrone">Zitrone</option>
</datalist>
</body>
</html>

Danke!
Gruß Markus