Working on a form that needs to get an user's input on a picklist field. I am using the force:inputField tag to bind the input field. But the physical look of the picklist field is a little off. See the screenshot1 and screenshot2 and my code below:
<div class="slds-form-element">
<label class="slds-form-element__label" for="showAs">Show Time As: </label>
<div class="slds-form-element__control slds-combobox-picklist">
<force:inputField value="{!v.newEvent.ShowAs}" required="true"/>
</div>
</div>
What I want the input field to look like is this. This example uses the select tag with the select class="slds-select" and the picklist values are specified in between the option tags. Here are the codes:
<div class="slds-form-element">
<label class="slds-form-element__label" for="select-01">Select Label</label>
<div class="slds-form-element__control">
<div class="slds-select_container">
<select class="slds-select" id="select-01">
<option value="">Please select</option>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</div>
</div>
I want to be able to see the dropdown arrow and click on it to select the picklist value. Anyone here know how this can be done using the force:inputField tag?