Thay đổi Kiểu/Cái nhìn của Asp: Hộp kiểm bằng cách sử dụng CSS

Question

Tôi muốn thay đổi giao diện "3D" chuẩn của hộp kiểm asp.net chuẩn để nói rắn 1px. Nếu tôi cố gắng áp dụng kiểu dáng cho Border chẳng hạn, nó chỉ làm như vậy - vẽ hộp kiểm tiêu chuẩn với một đường viền xung quanh nó - đó là giá trị mà tôi đoán.

Dù sao, có cách nào để thay đổi cách hộp văn bản thực tế được tạo kiểu không?

Answer 1

Tôi nghĩ rằng cách tốt nhất để làm cho CheckBox trông thật sự khác nhau không phải là để sử dụng kiểm soát hộp kiểm ở tất cả. Sử dụng tốt hơn hình ảnh của riêng bạn để kiểm tra/bỏ chọn trạng thái trên đầu của siêu liên kết hoặc phần tử hình ảnh. Chúc mừng.

Answer 2

Không chắc rằng nó thực sự là một câu hỏi liên quan asp.net .. Give này một shot, rất nhiều thông tin tốt ở đây:

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

Answer 3

Họ đang phụ thuộc vào trình duyệt thực sự.

Có thể bạn có thể làm điều gì đó tương tự như câu trả lời trong câu hỏi this về cách thay đổi nút duyệt tệp.

Answer 4

Hãy nhớ rằng kiểm soát asp: Hộp kiểm thực tế xuất ra nhiều hơn chỉ một đầu vào hộp kiểm duy nhất.

Ví dụ, mã đầu ra của tôi

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

nơi CheckBoxStyle là giá trị của thuộc tính CssClass áp dụng cho việc kiểm soát và cbCheckBox là ID của điều khiển.

Để tạo kiểu cho đầu vào, bạn cần phải viết CSS để nhắm mục tiêu

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

Answer 5

Thay vì sử dụng một số điều khiển phi tiêu chuẩn, điều bạn nên làm là sử dụng javascript không gây khó chịu để thực hiện điều đó sau khi thực tế. Xem http://code.google.com/p/jquery-checkbox/ để biết ví dụ.

Sử dụng hộp kiểm ASP tiêu chuẩn đơn giản hóa việc viết mã. Bạn không cần phải viết điều khiển người dùng của riêng mình và tất cả các mã/trang hiện tại của bạn không cần phải được cập nhật.

Quan trọng hơn, đó là điều khiển HTML chuẩn mà tất cả các trình duyệt đều có thể nhận ra. Nó có thể truy cập được cho tất cả người dùng và làm việc nếu họ không có javascript. Ví dụ, trình đọc màn hình cho người mù sẽ có thể hiểu nó như một điều khiển hộp kiểm, và không chỉ là một hình ảnh với một liên kết.

Answer 6

Cách đơn giản nhất, bằng cách sử dụng điều khiển hộp kiểm ASP với thiết kế tùy chỉnh.

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

bạn có thể sử dụng một cái gì đó như thế .. hy vọng rằng sẽ giúp

Answer 7

Tại sao không sử dụng nút Asp.net CheckBox với ToggleButtonExtender sẵn từ các công cụ kiểm soát Ajax.

Answer 8

Không có điều nào ở trên hoạt động tốt khi sử dụng ASP.NET Web Forms và Bootstrap.

tôi đã kết thúc bằng 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> 

Kết quả Paul Cảnh Sát trông như thế này ...

Answer 9

dán mã này trong css của bạn và nó sẽ cho phép bạn tùy chỉnh phong cách hộp kiểm của bạn. Tuy nhiên, nó không phải là giải pháp tốt nhất, nó khá nhiều hiển thị phong cách của bạn trên đầu trang của hộp kiểm hiện có/radiobutton.

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