在HTML中爲組合框設計樣式選擇和輸入元素

Question

對於MS Dynamics CRM樣式中的自定義用戶控件，我需要有一個組合框，它本身不是HTML。

我的想法是把input和select放在一起。問題是，我可以

• 使用select控制的箭頭本身，但我需要擺脫select控件的值部分的 。它是至少本 當我經由與按鈕移動鼠標按下標記，即使color:transparent，或

• 躺在頂另一元件，但然後我不能打開下拉 編程。

該控件還必須沿着input元素延伸到整個控件的完整大小。

此外，在Internet Explorer中，下拉列表也隨當前選定的元素一起移動，所以如果我選擇第三個option，下次打開時，前兩個option將顯示在上方。

由於此自定義控件將顯示在iframe中，因此我必須使用select，以便下拉部分也將在iframe之外呈現，並且不會被切斷。這是必需的。

請看https://jsfiddle.net/z7tcrtdg/得到一個大概的想法。

Answer 1

您應該在select元素中使用大小屬性將任何樣式應用於您的選項或選擇。

您可能會感到驚訝，但MS實現下拉列表，如默認所述。讓我解釋一下：你看到輸入元素，當你點擊它時，js函數應用「display：none」來輸入，並從擴展select（以及其他）中移除該屬性。我在這種不受支持的自定義方面有豐富的經驗。

由於此自定義控件將顯示在iframe中，因此我必須使用select來使下拉部分也會呈現在iframe之外，並且不會被截斷。這是必需的。

有兩種方法來實現這一目標： 1.您的HTML網頁資源設置了足夠的空間 2.將控件的標記直接到標準標記（不推薦無比的和不支持）

希望這有助於。

UPD：

如果你沒有爲您的自定義控件的可用空間足夠的信息，只有一個執行方式。這種方式直接將您的控件的標記放入標準的HTML表單標記中。 在選擇這種方式作爲解決方案之前，瞭解所有後果非常重要。

所以，我想從控制標記開始。請大家看看下面的代碼塊：

<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> 

外觀：

與定義size選擇之間的區別是，選擇顯示爲已經展開，你不需要做任何與他的交互（這與您嘗試以編程方式打開select有關）。

你可能會驚訝，但正如我提到的select早期這種狀態（已經與定義size屬性擴展）是應用任何CSS樣式option標籤內的唯一途徑。

標記說明：

首先td節點包含代表標籤（場顯示名稱）的控制鄰近的元件。第二個td包含與下拉控件直接相關的標記，並且包含兩個主要部分：'標籤'（當前選定值的顯示名稱）和默認情況下處於隱藏狀態的select。

您的責任：

您應該處理並正確使用您控制所有用戶交互響應。您應該自行實施一個控制功能的簡短列表：
1.將實際值標記爲select，並在表格加載
2.存儲用戶交互的結果。 MS的表單引擎無法自動確定您的控件中的更改。
3.顯示select，並在用戶點擊'標籤'和後退操作時隱藏'label'元素。

如何在動態CRM實施形式而言隱藏元素：

請看看在div元素與ID scn_sctps_ctrlContainer。您可以找到style="display:none;"和稱爲ms-crm-Inline-HideByZeroHeight的CSS類。這兩件事幫助你隱藏元素。

如果您有任何問題，請隨時詢問。