lightning:select Formatting not like in Lightning UI

I would expect components in the lightning namespace to match the LEX design in the future, even though we can't say when/if this will happen.

In the meantime, the guys at Appiphony have made a great job creating components that match the SLDS look & feel.

Have a look at the Strike components, in this case the Strike Select one, which is exactly what you want. These are free and open source. In the future, when lightning:select will be matching the LEX UI, you'll just have to replace the strike component by the standard one.

enter image description here


I know this is not the answer as such, but wanted to share what I did. I recently spent some time on this, I think you'd have to implement your own Pickist from SLDS. If you inspect the DOM on the Opportunity form, you'll see that the rendered list on the Opportunity is a div rather than select that the lightning:select renders.

I used this half-way solution to style the Select as I found implementing a Picklist component to be troublesome being pretty new to the whole Lightning framework and for my needs, I wasn't that bothered (I pinched this CSS from Process Builder 'new' which does use select rather than div)

.THIS select {
    border: 1px solid #111;
    background: transparent;
    width: 100%;
    padding: 5px 35px 5px 5px;
    border: 1px solid rgb(216, 221, 230);
    height: 34px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI3LjYgMjEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI3LjYgMjEiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICA8Zz4NCiAgICA8ZGVmcz4NCiAgICAgIDxwYXRoIGlkPSJTVkdJRF8xXyIgZD0iTTUuNiA1aDE2LjRjMC40IDAgMC44IDAuNiAwLjQgMWwtOCA5LjhjLTAuMyAwLjMtMC45IDAuMy0xLjIgMGwtOC05LjhDNC44IDUuNiA1LjEgNSA1LjYgNXoiLz4NCiAgICA8L2RlZnM+DQogICAgPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+DQogICAgICA8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgb3ZlcmZsb3c9InZpc2libGUiLz4NCiAgICA8L2NsaXBQYXRoPg0KICAgIDxyZWN0IHg9IjAiIHk9IjAiIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiM1NTY5OEQiIHdpZHRoPSIyNy42IiBoZWlnaHQ9IjIxIi8+DQogIDwvZz4NCjwvc3ZnPg0K);
    background-repeat: no-repeat;
    background-position: 97.5% 50%;
    background-size: .875rem .875rem, 100% 100%;
}