it-swarm.com.de

Wie ändere ich den Auswahlfeldpfeil?

Ich brauche deine Hilfe.

Ich kann nicht scheinen, meinen Kopf um dieses zu wickeln und es herauszufinden. Wie ändere ich den Standard Windows 7, IE 10 Standardpfeil im Auswahlfeld:enter image description here Um es so aussehen zu lassen, benutze den benutzerdefinierten Pfeil unten:enter image description here.

Hier ist der Pfeil, den ich verwenden möchte:enter image description here

Hier ist mein HTML-Markup:

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
   select { font: normal 13px Arial; color: #000;}
   .container {
         border: 1px solid red;
         position: relative; width: 124px; height: 18px; overflow: hidden;
    }
   .inpSelect {
        color: black; background: #ffa;
        position: absolute; width: 128px; top: -2px; left: -2px;
    }
   </style>

<script type="text/javascript">
</script>

</head>

<body>

<div class="container">
    <select class="inpSelect" name="xxx">
        <option value="0" selected="selected">actual browser</option>
        <option value="1">IE</option>
        <option value="2">Firefox</option>
        <option value="3">Opera</option>
        <option value="4">Safari</option>
    </select>
</div>
</body>

</html>
40
Jason Kelly

Sie können den Container oder das Hintergrundbild mit dem reinen CSS-Pfeil überspringen:

select {

  /* make arrow and background */

  background:
    linear-gradient(45deg, transparent 50%, blue 50%),
    linear-gradient(135deg, blue 50%, transparent 50%),
    linear-gradient(to right, skyblue, skyblue);
  background-position:
    calc(100% - 21px) calc(1em + 2px),
    calc(100% - 16px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;

  /* styling and reset */

  border: thin solid blue;
  font: 300 1em/100% "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;

  /* reset */

  border-radius: 0;
  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance:none;
  -moz-appearance:none;
}

Probe hier

56
Veiko Jääger

Mit nur einem Selektor arbeiten:

select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    -webkit-appearance: none;
    background-position-x: 244px;
}

Geiger

27
Julio Marins

CSS

select.inpSelect {
  //Remove original arrows
  -webkit-appearance: none; 
  //Use png at assets/selectArrow.png for the arrow on the right
  //Set the background color to a BadAss Green color 
  background: url(assets/selectArrow.png) no-repeat right #BADA55;
}
13
Seth McClaine