Dropdown list both left and right align

Question

I am using select2 plugin for dropdown list on angularjs application. I want to show text both left and right.

<select ng-model="selEmployee" id='selUser' name="selEmp" ng-disabled="currentmode == 'edit' || currentmode=='view'">
    <option ng-repeat="employee in employees" value="{{employee.Ldap}}">
           {{employee.FirstName}} {{employee.LastName}} ({{employee.Email}})
    </option>
    <option value="" style="display:none">Please select</option>

I want to show Firstname and lastname to the left side and email to the right. Can you please help. Thanks in advance.

Answer 1

There are only a few style attributes that can be applied to an element.

This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.

There are replacement plug-ins/libraries that look like a but are actually composed of regular HTML elements that CAN be styled.

it's not possible, as the styling for these elements is handled by the user's OS. MSDN: Option

Except for background-color and color, style settings applied through the style object for the option element are ignored.