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.
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%;
}