使用CSS更改樣式/ Asp的外觀：CheckBox使用CSS

Question

我想將標準asp.net複選框的標準「3D」外觀更改爲純色1px。如果我嘗試將樣式應用到邊框，例如它就是這樣 - 繪製帶有邊框的標準複選框 - 這是有效的我猜。

無論如何，有沒有辦法改變實際文本框的樣式？

Answer 1

我覺得做的CheckBox的最佳方式看起來非常不同的是不使用複選框控制的。在超鏈接或圖像元素頂部更好地使用自己的圖像進行選中/未選中狀態。乾杯。

Answer 2

不知道它確實是一個asp.net有關問題..給這一個鏡頭，很多很好的信息在這裏：

http://www.456bereastreet.com/archive/200409/styling_form_controls/

Answer 3

他們是依賴於瀏覽器真的。

也許你可以做類似於this有關更改文件瀏覽按鈕的問題的答案。

Answer 4

請注意，asp：CheckBox控件實際上輸出的不僅僅是一個複選框輸入。

例如，我的代碼輸出

<span class="CheckBoxStyle"> 
    <input id="ctl00_cphContent_cbCheckBox" 
      name="ctl00$cphContent$cbCheckBox" 
      type="checkbox"> 
</span> 

其中CheckBoxStyle是施加到控制和cbCheckBox的CssClass屬性屬性的值是控制的ID。

款式的輸入，你需要編寫CSS目標

span.CheckBox input { 
    /* Styles here */ 
} 

Answer 5

而不是使用一些非標準的控件，你應該做的是使用不顯眼的JavaScript來做到這一點。一個例子見http://code.google.com/p/jquery-checkbox/。

使用標準的ASP複選框簡化了編寫代碼。您不必編寫自己的用戶控件，並且所有現有的代碼/頁面都不必更新。

更重要的是，它是所有瀏覽器都可以識別的標準HTML控件。所有用戶都可以訪問它，並且如果他們沒有JavaScript，就可以工作。例如，盲人屏幕閱讀器將能夠將其理解爲複選框控件，而不僅僅是具有鏈接的圖像。

Answer 6

最簡單的最佳方式，使用ASP複選框控件與自定義設計。

chkOrder.InputAttributes["class"] = "fancyCssClass"; 

你可以使用類似的東西..希望幫助

Answer 7

爲什麼不使用Asp.net的CheckBox按鈕從Ajax控件工具包提供ToggleButtonExtender。

Answer 8

以上都不適用於使用ASP.NET Web窗體和引導程序。

最後我用保羅警長Simple Bootstrap CheckBox for Web Forms

<style> 
    .checkbox .btn, .checkbox-inline .btn { 
    padding-left: 2em; 
    min-width: 8em; 
    } 
    .checkbox label, .checkbox-inline label { 
    text-align: left; 
    padding-left: 0.5em; 
    } 
    .checkbox input[type="checkbox"]{ 
     float:none; 
    } 
</style> 


<div class="form-group"> 
    <div class="checkbox"> 
     <label class="btn btn-default"> 
      <asp:CheckBox ID="chk1" runat="server" Text="Required" /> 
     </label> 
    </div> 
</div> 

結果看起來像這樣...

Answer 9

粘貼到你的CSS代碼並它可以讓您自定義的複選框的風格。然而，這不是最好的解決方案，它幾乎在現有的複選框/單選按鈕上顯示你的風格。

input[type='checkbox']:after 
{ 

     width: 9px; 
     height: 9px; 
     border-radius: 9px; 
     top: -2px; 
     left: -1px; 
     position: relative; 
     background-color: #3B8054; 
     content: ''; 
     display: inline-block; 
     visibility: visible; 
     border: 3px solid #3B8054; 
     transition: 0.5s ease; 
     cursor: pointer; 

} 

input[type='checkbox']:checked:after 
    { 
     background-color: #9DFF00; 
    }