• Asp.Net
  • MVC
  • C#
  • SQL Server
  • JavaScript
  • Learn from Life

Prakash Rathod

~ Passion is not a logic; it's an emotion.

Prakash Rathod

Monthly Archives: March 2017

CSS style problem with MVC rendered checkboxes using MVC helper

09 Thursday Mar 2017

Posted by Prakash in HTML5 CSS3

≈ Comments Off on CSS style problem with MVC rendered checkboxes using MVC helper

I have faced the issue with CSS for checkboxes in asp.net mvc. Below is mvc code.


 @Html.CheckBoxFor(model => model.GroupClosed)
  <label for="GroupClosed" class="block">
                            Group Closed
                        </label>

It will render as below:


 <div class="checkbox clip-check check-primary">
                        <span class="control-label" style="color:white">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <input id="GroupClosed" name="GroupClosed" type="checkbox" value="true"><input name="GroupClosed" type="hidden" value="false">
                        <label for="GroupClosed" class="block">
                            Group Closed
                        </label>
                    </div>                     

Before modify the css file as below.


.clip-check input[type="checkbox"]:checked + label:before,
 {
  border-width: 10px;
}

After modify:


.clip-check input[type="checkbox"]:checked + label:before,
.clip-check  input[type="checkbox"]:checked + input[type="hidden"] + label::before {
  border-width: 10px;
}

Note that the bold line contains the input[type=”hidden”] which identifies the hidden checkbox and solve the issue. I have added this line and make changes according to css has been written in css file. Happy 🙂

Recent Posts

  • Create a custom autocomplete control in ASP.NET MVC
  • Nth Highest Salary
  • Generate x509 certificate in pem, cer and pfx and export public key
  • Send an image (stored as base64 string) inline in email
  • Put/Delete http verb not working server

Categories

  • Android
  • Asp.Net
  • BANKING
  • c#.net
  • Crystal Report
  • HTML5 CSS3
  • iPhone
  • JavaScript
  • Life – Spiritual – Reality
  • Lightswitch
  • Links
  • MAC
  • MVC
  • Netoworking
  • Silverlight
  • SQL Interview Questions
  • SQL Server
  • Uncategorized
  • Version Controls
  • Windows Store

Archives

  • August 2019
  • May 2019
  • April 2018
  • October 2017
  • August 2017
  • April 2017
  • March 2017
  • February 2017
  • December 2016
  • April 2016
  • January 2016
  • November 2015
  • January 2015
  • December 2014
  • October 2014
  • September 2014
  • June 2014
  • April 2014
  • March 2014
  • February 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • July 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • July 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009

© 2021 Prakash Rathod