Question

I’ve been trying to skin a select box with css to make a custom form. I’ve been able to successfully do with firefox but chrome and safari have some extra parts to it not allowing me to do it.

Answer 1

Set an appearence: none and you can do almost anything with it: https://jsfiddle.net/CUA9p/1475/

body {
  background-color: #fef;
  margin: 2em;
}

select {
    -webkit-appearance: none;
       -moz-appearance: none;
    background-color: #103;
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 10px, transparent 10px, transparent 20px);
    border: 1px solid white;
    border-radius: 2px;
    box-shadow: 0 0 0 2px #103, 0 3px 0 2px #649;
    color: white;
    font-family: sans-serif;
    font-style: italic;
    margin: 2px;
    outline: none;
    text-align: center;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    text-transform: lowercase;
    width: 100px;
}

<select>
    <option>Hello</option>
    <option>World</option>
</select>

Also take a look at this: http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/