how would i style a check box to function like a button

  • (2 Pages)
  • +
  • 1
  • 2

16 Replies - 397 Views - Last Post: 07 May 2020 - 12:14 AM

#1 DarenR   User is offline

  • D.I.C Lover

Reputation: 705
  • View blog
  • Posts: 4,565
  • Joined: 12-January 10

how would i style a check box to function like a button

Posted 06 May 2020 - 08:02 AM

how would i style a check box to function like a button with the checkbox still inside the button

so basically it would be a box like a button with a checkbox inside the box and the words associated with the checkbox next to the checkbox inside the button .

and when clicked the button will show checked or unchecked...


dont ask why -- ugh

i have it currently styled as a normal check box

  <div class="DivInstHeadCbx"><asp:CheckBox ID="cbxInstructor" class="cbl" runat="server" name="test" Text="im sample text for instructor" value="I"/></div>




.DivInstHeadCbx{
    height:25px;

}


well after searching the solution class cbl doesnt exists so pretend that isnt there

Is This A Good Question/Topic? 0
  • +

Replies To: how would i style a check box to function like a button

#2 modi123_1   User is offline

  • Suitor #2
  • member icon



Reputation: 15782
  • View blog
  • Posts: 63,261
  • Joined: 12-June 08

Re: how would i style a check box to function like a button

Posted 06 May 2020 - 08:18 AM

So like if you have a bunch of "buttons" (that are checkboxes) and if you click one it stays pressed visually. Then if you click another "button" the one was clicked becomes unclicked and then the new one stays visually pressed.

Posted Image
Was This Post Helpful? 0
  • +
  • -

#3 DarenR   User is offline

  • D.I.C Lover

Reputation: 705
  • View blog
  • Posts: 4,565
  • Joined: 12-January 10

Re: how would i style a check box to function like a button

Posted 06 May 2020 - 08:32 AM

would love to show a picture but for some reason dic doesnt allow me to upload anything
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is offline

  • Suitor #2
  • member icon



Reputation: 15782
  • View blog
  • Posts: 63,261
  • Joined: 12-June 08

Re: how would i style a check box to function like a button

Posted 06 May 2020 - 08:35 AM

The f'n hackers are to blame for that.

I typically use IMGUR.
Was This Post Helpful? 0
  • +
  • -

#5 DarenR   User is offline

  • D.I.C Lover

Reputation: 705
  • View blog
  • Posts: 4,565
  • Joined: 12-January 10

Re: how would i style a check box to function like a button

Posted 06 May 2020 - 08:36 AM

more like this:

My link

Posted Image

This post has been edited by modi123_1: 06 May 2020 - 08:48 AM

Was This Post Helpful? 0
  • +
  • -

#6 modi123_1   User is offline

  • Suitor #2
  • member icon



Reputation: 15782
  • View blog
  • Posts: 63,261
  • Joined: 12-June 08

Re: how would i style a check box to function like a button

Posted 06 May 2020 - 08:47 AM

Oh, so just rounded corners and back colored?
Was This Post Helpful? 0
  • +
  • -

#7 DarenR   User is offline

  • D.I.C Lover

Reputation: 705
  • View blog
  • Posts: 4,565
  • Joined: 12-January 10

Re: how would i style a check box to function like a button

Posted 06 May 2020 - 08:52 AM

with the check box visible like the radio buttons
Was This Post Helpful? 0
  • +
  • -

#8 DarenR   User is offline

  • D.I.C Lover

Reputation: 705
  • View blog
  • Posts: 4,565
  • Joined: 12-January 10

Re: how would i style a check box to function like a button

Posted 06 May 2020 - 08:57 AM

oh and it has to be asp:checkbox
Was This Post Helpful? 0
  • +
  • -

#9 modi123_1   User is offline

  • Suitor #2
  • member icon



Reputation: 15782
  • View blog
  • Posts: 63,261
  • Joined: 12-June 08

Re: how would i style a check box to function like a button

Posted 06 May 2020 - 09:03 AM

There's options like this:

https://flatlogic.gi...-checkbox/demo/
https://flatlogic.gi...strap-checkbox/

.. but really this gets to the nitty gritty.
https://stackoverflow.com/a/37833560

https://www.w3school...om_checkbox.asp
Was This Post Helpful? 0
  • +
  • -

#10 DarenR   User is offline

  • D.I.C Lover

Reputation: 705
  • View blog
  • Posts: 4,565
  • Joined: 12-January 10

Re: how would i style a check box to function like a button

Posted 06 May 2020 - 10:40 AM

those are neat but they arent asp:checkboxes
different animal
Was This Post Helpful? 0
  • +
  • -

#11 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: how would i style a check box to function like a button

Posted 06 May 2020 - 11:23 AM

asp:CheckBox still renders as an HTML input element (perhaps with some surrounding fluff). There might be some asp framework or plug-ins that offer this functionality (if they are still around).

Otherwise, what I would consider is wrapping the checkbox within a label that uses for="the_id". This means that clicking the label will check/uncheck the checkbox. Then you can concentrate on CSS for the label to make it look button-like, perhaps using hover, active, etc., to exhibit some button-like behaviours.
Was This Post Helpful? 0
  • +
  • -

#12 DarenR   User is offline

  • D.I.C Lover

Reputation: 705
  • View blog
  • Posts: 4,565
  • Joined: 12-January 10

Re: how would i style a check box to function like a button

Posted 06 May 2020 - 11:59 AM

what i did was actually use the AssociatedControlID part of the label --- for doesnt work well with asp controls
Was This Post Helpful? 0
  • +
  • -

#13 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: how would i style a check box to function like a button

Posted 06 May 2020 - 12:08 PM

Same thing

Quote

When the AssociatedControlID property is set, the Label control renders as an HTML label element, with the for attribute set to the ID property of the associated control.


docs

I think it is important to recognise when working with asp, or asp.net mvc, et al., that controls will still render as raw HTML, CSS (and perhaps some associated JS).
Was This Post Helpful? 0
  • +
  • -

#14 modi123_1   User is offline

  • Suitor #2
  • member icon



Reputation: 15782
  • View blog
  • Posts: 63,261
  • Joined: 12-June 08

Re: how would i style a check box to function like a button

Posted 06 May 2020 - 12:09 PM

Well - ya can dig through options, but I totally remembered AJAX Tool Kit exists! I used it frequently for modals and fancy stuff.

It's MS approved effort with the community. It's got what you need. Like electrolytes.

http://www.ajaxtoolk...ggleButton.aspx
Was This Post Helpful? 1
  • +
  • -

#15 DarenR   User is offline

  • D.I.C Lover

Reputation: 705
  • View blog
  • Posts: 4,565
  • Joined: 12-January 10

Re: how would i style a check box to function like a button

Posted 06 May 2020 - 12:12 PM

yeah that's where i got the idea -- from your link

also im more of an osmosis kind a guy --

https://www.nydailyn...ticle-1.1067359
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2