在HTML中为ComboBox设置选择和输入元素的样式

Question

For a custom user control in MS Dynamics CRM-style, I need to have a combobox, which is not natively present in HTML.

My idea was to put an input and a select after each other. The Problem is that I can

• use the select control's arrow itself, but then I need to get rid of the value part of the select control. It is at least present when I mark via moving the mouse with button down, even with color:transparent , or

• lay another element on top, but then I cannot open the dropdown programmatically.

The control must as well stretch along the input element to full size of the whole control.

Also, in the Internet Explorer, the dropdown list also moves with the currently selected element, so if I select, say, the third option , when opening next time, the first two option s will be displayed above.

Since this custom control will be displayed in an iframe , I have to use a select so that the dropdown-part will be rendered outside the iframe as well and does not get cut off. This is required.

Please see https://jsfiddle.net/z7tcrtdg/ to get a rough idea.

Answer 1

You should use size attribute in select element to apply any styles to your options or select.

You might be surprised but MS implement drop down lists as you describe by default. Let me explain: you see input element and when you click on it js function apply "display:none" for input and remove this attribute from expanded select (and something else). I have a big experience in this kind of unsupported customizations.

Since this custom control will be displayed in an iframe, I have to use a select so that the dropdown-part will be rendered outside the iframe as well and does not get cut off. This is required.

There is two ways to achieve this goal: 1. Set enough space for your html web-resource 2. Put control's markup directly to standard markup (extremely unrecommended and unsupported)

Hope this help.

UPD:

In case you don't have enough information about available space for your custom control there is only one way of implementation. This way is put markup of your control directly into standard HTML form markup. It's highly important to understand all consequences before you choose this way as a solution.

So, I would like to start from control markup. Please take a look at code block below:

<tr height="24">
<td class="ms-crm-ReadField-Normal ms-crm-FieldLabel-LeftAlign">
    <span class="ms-crm-InlineEditLabel">
        <span class="ms-crm-InlineEditLabelText" style="max-width:125px;text-align:Left;">Sale Status</span>
        <div class="ms-crm-InlineField withReqIcon"></div>
        <img alt="Required" src="/_imgs/frm_required.gif" class="ms-crm-Inline-RequiredLevel">
    </span>
</td>
<td class="ms-crm-Field-Data-Print" colspan="4">
    <div class="highContrast ms-crm-Inline-Chrome status">
        <div id="scn_sctps_valueContainer" class="ms-crm-Inline-Value">
            <span>None</span>
        </div>
        <div id="scn_sctps_ctrlContainer"
             class="ms-crm-Inline-Edit ms-crm-Inline-OptionSet noScrool ms-crm-Inline-HideByZeroHeight"
             style="display: none;">
            <select class="ms-crm-SelectBox ms-crm-Inline-OptionSet-AutoOpen" controlmode="normal"
                    id="scn_sctps_select" size="7">
                <option value="bs1">None</option>
                <option value="bs2">Qualification</option>
                <option value="bs621740000">Needs Analysis</option>
                <option value="bs621740001"
                        style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(128, 130, 133); background-color: rgb(241, 241, 241);">
                    Proposal/Quote
                </option>
                <option value="sb621740001621745001"
                        style="padding-left: 20px; background-color: rgb(249, 249, 249);">In Production
                </option>
                <option value="sb621740001621745002"
                        style="padding-left: 20px; background-color: rgb(249, 249, 249);">Prepared and Passed to
                    Sales
                </option>
                <option value="sb621740001621745003"
                        style="padding-left: 20px; background-color: rgb(249, 249, 249);">Rejected by Production
                </option>
                <option value="sb621740001621745004"
                        style="padding-left: 20px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(128, 130, 133); background-color: rgb(249, 249, 249);">
                    Rejected By Sales
                </option>
                <option value="bs621740003">Proposal sent</option>
                <option value="bs621740002">Negotiation/Review</option>
                <option value="bs621740004">Postponed</option>
            </select>
        </div>
        <span class="ms-crm-Inline-LockIcon" style="display:none;">
            <img src="/_imgs/inlineedit/locked.png" alt="locked">
        </span>
    </div>
</td>
</tr>

Appearance:

The difference between select with defined size is that select appears as already expanded and you don't need to make any interactions with him (it's related to your attempts to open select programmatically).

You might be surprised but as I mention earlier this state of select (already expanded with defined size attribute) it's the only way to apply any CSS styles to option tag inside.

Markup description:

First td node contains elements which represent label (field display name) near your control. Second td contains markup related directly to dropdown control and contains two primary parts: 'label' (display name of currently selected value) and select which is in hidden state by default.

Your responsibilities:

You should handle and properly respond to all user interactions with your control. There is a shortlist of control functionality that you should implement by yourself:
1. Set actual value to label and select on form load
2. Store result of user interactions. MS's form engine can't automatically determine changes in your control.
3. Show select and hide 'label' element when user clicks on 'label' and backward operation.

How to hide element in terms of Dynamics CRM form implementation:

Please take a look at a div element with id scn_sctps_ctrlContainer . You can find style="display:none;" and CSS class called ms-crm-Inline-HideByZeroHeight . These two things help you to hide element.

In case you have any questions please feel free to ask.