I'm using asp.net checkbox list which emits html as follows

<span id="ctl00_ContentPlaceHolder1_cbl" class="customcheckbox">

<input id="ctl00_ContentPlaceHolder1_cbl_0" type="checkbox"  
   name="ctl00$ContentPlaceHolder1$cbl$0" 
   onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$cbl$0\',\'\')', 0)" />
<label for="ctl00_ContentPlaceHolder1_cbl_0">Test User1</label><br />
<input id="ctl00_ContentPlaceHolder1_cbl_1" type="checkbox" 
  name="ctl00$ContentPlaceHolder1$cbl$1" 
  onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$cbl$1\',\'\')', 0)" />
<label for="ctl00_ContentPlaceHolder1_cbl_1">Test User2</label>

</span>

I'm trying to hide checkbox and show image instead of checkbox. I do not want to toggle becasue once i check this item is removed from list (ie....i want image with remove text in place of checkbox)

How can i hide original checkbox and show only image can some one guide me to correct solution

I was using something similar to this

.customcheckbox input
{
  text-decoration: none;
  outline: none;    
  background: #fff url(./images/cross.png) no-repeat;   
  display: block;  
  width: 25px;
  height: 16px;
  padding: 1px 0px 0px 0px;
  clear: left;
  float: left; 
}

.customcheckbox label
{
  font-size:80%;    
  font-family: "Lucida Grande",Verdana,"Trebuchet MS", Arial, Sans-Serif;
  width: 300px;
  height: 25px;
  padding: 1px 5px 0 0;  
  float: left;
}

1 answer

0
points

You can turn off display of the input with display: none and apply the background image to the label instead. Something like this:

.customcheckbox input
{
  display: none;
}

.customcheckbox label
{
  font-size:80%;    
  font-family: "Lucida Grande",Verdana,"Trebuchet MS", Arial, Sans-Serif;
  width: 300px;
  height: 25px;
  padding: 1px 5px 0 16px;  /* added left padding so bg image shows up */
  background: #fff url(./images/cross.png) no-repeat; 
}

Then, when the inputs are clicked you can swap out the bg image and insert text into the label if that's what you want to do. There are probably a dozen better ways to do this but that should work. :)

Answered almost 7 years ago by Don Zacharias
  • it works perfectly in Firefox but in IE it doesn't allow me to click rahul almost 7 years ago
  • Do you mean that in IE it doesn't *do anything* when you click? Nothing happens in any browser just based on the CSS and HTML here in your question. In addition to the onclick that does a postback you'd need a script to change the background image. Let me know if that helps. Don Zacharias almost 7 years ago