asp.CheckBox on render shows up inside span. Styles attributes end up on span, not checkbox

My asp.net checkbox ends up with a span around it. Setting the width and height to 30px doesn't change the checkbox in both full browser or collapsed into smart phone size. The checkbox is in a navbar. Everything works and collapses, I just can't change the style of the checkbox.

Starts out here:

<li>
    <asp:CheckBox ID="chkInflate" Style="width: 30px !important; height: 30px !important;
        margin-bottom: 5px;" class="form-control" EnableViewState="True" AutoPostBack="True"
        BackColor="#f6f2dc" ForeColor="Black" runat="Server" ToolTip="Check/Uncheck the box to have all the names expand with more info on this web page. Or go over and click on an event name to pop up a whole bunch of information.">
    </asp:CheckBox></li>
<li>

Inspect HTML in Chrome shows the size is assigned to the span. Not sure how to make the "chkInflate" hold the new size.

<span  class="form-control" style="color:Black;background-color:#F6F2DC;width: 30px !important;height: 30px !important;margin-bottom: 5px;"><input id="chkInflate" type="checkbox" name="chkInflate" onclick="javascript:setTimeout('__doPostBack(\'chkInflate\',\'\')', 0)"></span>

<input id="chkInflate" type="checkbox" name="chkInflate" onclick="javascript:setTimeout('__doPostBack(\'chkInflate\',\'\')', 0)">

</span>

My desire is a larger checkbox on both un-collapsed and collapsed display