All geek questions in one place

Increase checkbox size in asp.net?

I really tried a lot to increase checkbox size in asp.net. using the CSS stylesheet, but it doesn't work.

Maybe I did something wrong. I am trying to increase the width, size and height of the checkbox, but that is not all.

Can someone provide C # code or css code that can do this?

+3
source share
7 answers

You cannot do this. A checkmark is a browser component of a window. The best you can do is make your own control that SEEs like a check box, but actually consists of an image for each state.

, :

+4

asp.net ""

, css asp.net . :

<asp:CheckBox ID="chkBoxName" runat="server" CssClass="ChkBoxClass"/>

.ChkBoxClass input {width:25px; height:25px;}
+8

html.

<input type="checkbox" id="fatty">
<label for="checkbox-1">Checkbox 1</label>

fatty { /* Change width and height */
   width:4em;
   height:4em;
}

.

+2

, , , .

input[type=checkbox] {
    -ms-transform: scale(3); /* IE */
    -moz-transform: scale(3); /* FF */
    -webkit-transform: scale(3); /* Safari and Chrome */
    -o-transform: scale(3); /* Opera */
}

, .

.scale1 {
    margin: 15px;
    -ms-transform: scale(1); /* IE */
    -moz-transform: scale(1); /* FF */
    -webkit-transform: scale(1); /* Safari and Chrome */
    -o-transform: scale(1); /* Opera */
}

.scale2 {
    margin: 15px;
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari and Chrome */
    -o-transform: scale(2); /* Opera */
}

.scale3 {
    margin: 15px;
    -ms-transform: scale(3); /* IE */
    -moz-transform: scale(3); /* FF */
    -webkit-transform: scale(3); /* Safari and Chrome */
    -o-transform: scale(3); /* Opera */
}
<input id="cb1" type="checkbox" class="scale1">
<label for="cb1">scale1 </label>

<input id="cb2" type="checkbox" class="scale2">
<label for="cb2">scale2 </label>

<input id="cb3" type="checkbox" class="scale3">
<label for="cb3">scale3 </label>
Hide result
+1

- :

   <asp:CheckBox id="requestAccountCB" style="width: 20px; height: 20px;" runat="server"/>

:

    <style>
        #requestAccountCB { width: 20px; height: 20px }
    </style>

...

    <body>
       <form runat="server">
           <asp:CheckBox id="requestAccountCB" runat="server"/>
       </form>
    </body>
0

, .

, . css .

input[type=checkbox] {
display:none;
}

input[type=checkbox] + label
{
background-image: url('images/off.gif');
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}

input[type=checkbox]:checked + label
{
background-image: url('images/on.gif');
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}

HTML:

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>

.

.

BTW: ASP.NET , :

 <asp:CheckBox runat="server" ID="chkEmailForUnpluggedService" Text="<label for='thing'>" />
0

:

Html Rendered :

<span class="15465503">
    <input id="ctl00_ctl00_ctl00_BB_SB_ScB_ucSR_rptR_ctl01_chkShortlist" 
     type="checkbox" name="ctl00$ctl00$ctl00$BB$SB$ScB$ucSR$rptR$ctl01$chkShortlist");">
</span>

CSS :

input[id$="chkShortlist"] {
width: 18px;
height: 18px;
}
0

Source: https://habr.com/ru/post/1727829/

More articles:


All Articles