I am wondering if there is a CSS-only way to style those radio buttons of a radio button group that are not clicked after one of them was clicked.
Let's rephrase to clarify. I have a radio button group. Initially, all buttons are in the default state with no button selected. Now I click one radio button so that one now becomes selected. At this point, is there a way to give the other non-selected buttons a different style?
Please note that I don't need help with custom styling radio buttons. I know how to do that. This is specifically about the use case described above.
No, there is no attribute that the CSS can be linked to. There is only checked and "not checked". You'll have to do do some JavaScripting to get this done.
Related
When i click dropdown button and click it again for closing focus still remains. even when i move mouse away. How can focus removed for that case?
One possible solution is to remove the focus on the second click with the help of element.blur() - here are the related docs. You can add the class to the button on the first click and if the button has class (it will have on the second click) - just use blur.
But keep in mind, that some users want to interact with your site with the help of a keyboard, and removing focus will be annoying for them. Do you need focus to be visible on the button before opening the dropdown? Another possible solution is to remove :focus style from the element completely (outline: none), but it's not recommended.
I need to implement a segment button using only HTML, CSS and bootstrap as shown in the below picture. many people confuse between toggle and segment buttons. toggle-button toggles between on-click but the segment button can have multiple buttons and will toggle only on clicking the particular button. In my case, I need to implement only 2 buttons within 1 segment button. if my statement confuses, please follow the link and there is an example. any help is appreciated. thank you.
In Bootstrap, this feature is called "Button-Group", check this Reference: https://getbootstrap.com/docs/4.0/components/button-group/
You can style your Button-Group as you desire - if you want to e.g. put icons in it, just replace the text in the example ("left/middle/right") with an icon
I want to have a two check boxes behave as if they were radio buttons. When one is checked, I want the other to turn off. I am using ColdFusion <CFForm>. Another option would be to use a radio button tag but have them look like check boxes. Any suggestions?
Another option would be to use a radio button tag but have them look like check boxes. Any suggestions?
Don't. There's a reason checkboxes behave like checkboxes and radio buttons behave like radio buttons. If you introduce a deviation from this you'll just confuse your users who have been trained for years that this is the way these controls behave. If you want radio button functionality, use radio buttons.
So I'm starting with angular and I would like filter a list depending on which div is currently selected.
They are selected by being cliked. I suppose this is exactly how radio buttons behave but they are ugly and I would like to have a completely designed div (not just label) which is to be clicked.
I've read that you can add label with for attribute and hide the radio button to have something similar. I suppose what I would like is to be able to add for on a div to bind it.
What would be the best way to achieve this The Angular Way ?
You will find your solution at angular ui bootstrap goto buttons sections
I have been thinking about this for a while but can not think of a good way to do it. But if I am given a select one radio button list is there a good way to grey out all of the non selected radio buttons if and only if there is a value selected?
Its more an general idea than an answer (although it should work)...
look at the generated code of selectonemenu in the show case SelectOneRadio , it creates divs , one div for radio and 1 for the label , you can use jquery selectors for tracking all the divs (radio) that are not selected (got ui-state-default class) and access their labels using jquery next() selector (to access the unselected radio labels) , that way you can access all the needed elements and add lower their opacity to 0.5 (for example)
I guess you can place the js code into a function that will be called by onsuccess of p:ajax that you will add to p:selectOneRadio or in jquery ready function(if you detect that there is a value selected already on page load)