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

我想將標準 asp.net 複選框的標準“3D”外觀更改為實心 1px。例如，如果我嘗試將樣式應用於邊框，它就是這樣做的 - 繪製帶有邊框的標準複選框 - 我猜這是有效的。

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

將此程式碼粘貼到您的 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;
   }

在使用 ASP.NET Web 窗體和 Bootstrap 時，上述方法都不能正常工作。

我最終使用了 Paul Sheriff 的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>

結果看起來像這樣……

引用自：https://stackoverflow.com/questions/112883