We Keep Coding

how to create a custom Input radio button which have attributes inside it

I am using react styled components as styling in my project ok let me point out what actually i am feeling not right is the text between the box and also need to style it if it is checked
what i have tried ?
I craeted a outer div and inside it i put radio input which i display none and thought i can style the outer element but that make the radio button not clickable any solution to this problem if you present react specific solution will be great.
.radio__input{
display:none;
}
.radiobox{
width:60px;
height:60px;
border:1px solid black;
}
//i want the div radiobox to styled when one radiobox is selected
<div class="radiobox">
<input type="radio" class="radio__input" name="radio"/>
XS
</div>
<div class="radiobox">
<input type="radio" class="radio__input" name="radio"/>
S
</div>

You need to keep the radio button somewhere, for the sake of accessibility, and to still be able to select it.
A common solution to styling radio buttons is to style their <label> element instead, and use the CSS Adjacent sibling combinator to style it depending on the radio button’s state.
Some more things should be taken into account to make the component accessible to users who need assistive technology:
you should also use <fieldset> to provide an accessible name to the option group, even though “Green” might be self-explanatory
focus needs to be visible, and since you are hiding the radio button itself, one solution is to show it on the fieldset
each radio button still needs an accessible name, so add some hidden text also inside the labels
.color-options {
display: flex;
padding: .2em;
gap: .4em;
}
.color-options:focus-within {
outline: .2em solid blue;
}
.color-option {
width: 2em;
height: 2em;
}
input:checked+.color-option {
outline: .2em solid darkseagreen;
}
/* kudos to Scott O'Hara
https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html */
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
<fieldset>
<legend>Color</legend>
<div class="color-options">
<input type="radio" name="color" value="gray" id="color-gray" class="visually-hidden">
<label class="color-option" style="background-color: gray" for="color-gray">
<span class="visually-hidden">
Gray
</span>
</label>
<input type="radio" name="color" value="black" id="color-black" class="visually-hidden">
<label class="color-option" style="background-color: black" for="color-black">
<span class="visually-hidden">
Black
</span>
</label>
<input type="radio" name="color" value="darkgreen" id="color-darkgreen" class="visually-hidden">
<label class="color-option" style="background-color: darkgreen" for="color-darkgreen">
<span class="visually-hidden">
Dark Green
</span>
</label>
</div>
</fieldset>

I used unique ids for every radio button, which is used by the <label> element's for attribute to associate the labels with the radio buttons. So now the input is also checked when the label is clicked. Then i just styled the initial and checked state. But remember that you can only style elements according to the checked state of an input when they are a sibling or children. You can't access the parent element like in this case the .radiobox container with pure css.
.radiobox {
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
display: inline-block;
}
input[type="radio"] {
appearance: none;
}
input[type="radio"] + label {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
input[type="radio"]:checked + label {
background: blue;
}
<div class="radiobox">
<input type="radio" id="s" name="radio"/>
<label for="s">S</label>
</div>
<div class="radiobox">
<input type="radio" id="m" name="radio"/>
<label for="m">M</label>
</div>

How do I stop jQuery Mobile button group from overflowing?

I am trying to fit 7 buttons horizontally but am seeing some overflow on the smaller screen sizes.
Button Group Overflow
<div data-mini="true">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
<label for="checkbox-h-2a">Sun</label>
<input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b">
<label for="checkbox-h-2b">Mon</label>
<input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c">
<label for="checkbox-h-2c">Tue</label>
<input type="checkbox" name="checkbox-h-2d" id="checkbox-h-2d">
<label for="checkbox-h-2d">Wed</label>
<input type="checkbox" name="checkbox-h-2e" id="checkbox-h-2e">
<label for="checkbox-h-2e">Thu</label>
<input type="checkbox" name="checkbox-h-2f" id="checkbox-h-2f">
<label for="checkbox-h-2f">Fri</label>
<input type="checkbox" name="checkbox-h-2g" id="checkbox-h-2g">
<label for="checkbox-h-2g">Sat</label>
</fieldset>
</div>

Try set mini version applied directly in the fieldset tag, something like this:
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">

Well, i came across the same requirement some time ago and i found out that is not really easy. This is how i solved it:
Assuming your <div data-mini="true"> has a class: <div data-mini="true" class="no-wrap"> :
.no-wrap {
box-sizing: border-box;
text-align: center;
width: 100%;
}
.no-wrap .ui-controlgroup-controls {
display: inline-block !important;
width: 100%;
}
.no-wrap .ui-controlgroup-controls .ui-checkbox {
float: left;
clear: none;
width: 14%; // <- 100% / num. of controls
}
.no-wrap .ui-btn {
text-overflow: initial !important;
}
.no-wrap label.ui-btn {
text-align: center;
padding-left: 0 !important;
padding-right: 0 !important;
}
Explanation: the width of each control shall be set in percent as 100 / num. of controls in your controlgroup. For example, if you need:
8 controls: width: 12.5%
7 controls: width: 14.2%
... and so on.
By adding the container div you can also specify the width of the whole controlgroup inside the JQM page:
.no-wrap .ui-controlgroup-controls {
display: inline-block !important;
width: 80%; // <- this will set the width of the whole controlgroup
}
DEMO: https://plnkr.co/edit/fFU7Zf5Wr2jD6anD9h4L?p=preview
Maybe it seems a little bit overcooked, but the reason is to keep things cross-browser, also in IE.

how to create checkbox image base

I want to create some kind of checkboxes which is totally image base. This means that when I click that image then the border color change to some kind of color: lets say blue and stay blue until the next click which cancel it.
The problem is that I don't know from where to start, I have create some kind of checkboxes base image with green mark, but I don't succeed to convert them to my desired request.
This is the final result,which I need to get:
The images are hosted on tinypic in the following links:
http://i68.tinypic.com/b5496s.jpg
http://i67.tinypic.com/2vdk07r.png
This is my code so far, which isn't on the right direction at all:
input[type="checkbox"]:not(old){
width: 28px;
margin: 0;
padding: 0;
opacity: 0;
}
input[type="checkbox"]:not(old)+label{
display: inline-block;
margin-left: -28px;
padding-left: 28px;
line-height: 24px;
background: url(http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/checks.png) no-repeat 0 0;
}
input[type="checkbox"]:not(old):checked + label{
background-position : 0 -24px;
}
<div class="checkbox">
<input id="chk1" type="checkbox" name="animal" value="dog"/>
<label id="lbl1" >Dog</label>
<br>
<input id="chk2" type="checkbox" name="animal" value="cat"/>
<label id="lbl2" >Cat</label>
<br>
<input id="chk3" type="checkbox" name="animal" value="horse"/>
<label id="lbl3" >Horse</label>
</div>

Using this HTML:
<label>
<input type="checkbox" /><img src="//placehold.it/100x100" />
</label>
You can hide the checkbox and style the img based on the :checked pseudoclass and adjacent sibling selector, for example:
/* hiding the checkbox */
input[type="checkbox"] {
position:absolute;
opacity:0;
}
/* unchecked state - black border */
input[type="checkbox"] + img {
border:2px solid #000;
border-radius:6px;
}
/* checked state - blue border */
input[type="checkbox"]:checked + img {
border-color:#4df;
}
Demo: https://jsfiddle.net/7zrpr5fd/

Radio button doesnt work inside css accordion

I have a radio button inside a css accordion and for some reason it doesnt work. Maybe the css I'm using for the accordion is overriding the radio button? maybe because the accordion is made from a check box that is causing problems? I've also put dojo controls inside the accordion and some work, some don't Below is the code: The first radio button outside the accordion works fine
HTML:
<input type="radio" name="colors" value="green" />Green <!--this works fine-->
<input type="radio" name="colors" value="red" />Red
<section id="accordionMTF">
<div>
<div style="width: 450px;
height: 80px"></div>
<input type="checkbox" id="checkMTF-1" checked="checked" />
<label for="checkMTF-1">Input System Info</label>
<article>
<input type="radio" name="colors" value="green" />Green <!--this doesnt work-->
<input type="radio" name="colors" value="red" />Red</article>
</div>
<div>
<input type="checkbox" id="checkMTF-2" />
<label for="checkMTF-3">Input Marking Information</label>
<article>
<p style="width: 450px;
height: 400px">Fill out form</p>
</article>
</div>
<div>
<input type="checkbox" id="checkMTF-3" />
<label for="checkMTF-4">Complete and Submit</label>
<article>
<p style="width: 450px;
height: 400px">Fill out form</p>
</article>
</div>
</section>
css:
/Mark Ticket Form Accordion/
#accordionMTF input {
display: none;
}
#accordionMTF label {
background: #eee;
border-radius: .25em;
cursor: pointer;
display: block;
margin-bottom: .125em;
padding: .25em 1em;
z-index: 20;
}
#accordionMTF label:hover {
background: #ccc;
}
#accordionMTF input:checked + label {
background: #ccc;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
color: white;
margin-bottom: 0;
}
#accordionMTF article {
background: #f7f7f7;
height:0px;
overflow:hidden;
z-index:10;
}
#accordionMTF article p {
padding: 1em;
}
#accordionMTF input:checked article {
}
#accordionMTF input:checked ~ article {
border-bottom-left-radius: .25em;
border-bottom-right-radius: .25em;
height: auto;
margin-bottom: .125em;
}
I have a fiddle:
here
Thanks

So long as you continue to use the same HTML structure, all you need to do is rework your css a little bit. The follow css
#accordionMTF input {
display: none;
}
Needs to look like this
#accordionMTF > div > input[type='checkbox'] {
display : none;
}
This is an excellent attempt to create an accordion without javascript. You might also consider incorporating CSS3 animations.
There is also a bug where your labels have the wrong for attribute value.
Here is a working fiddle http://jsfiddle.net/czo2m22s/21/

The developer of you accordion has decided to hide ALL inputs (!?)
#accordionMTF input {
display: none;
}
A more sane approach would be to give the inputs that are required for the accordion functionality a class (.hidden) and use that as a selector instead of blanket hidding all inputs:
<input type="checkbox" class="hidden" id="checkMTF-1" class="hidden" />
.hidden {
display: none;
}
WORKING EXAMPLE

here is the reason:
accordionMTF input {
display: none;
}

Make fields editable when a button is clicked

the user of my application should be able to change the email and the phone number by clicking in a button "Change", this is my code:
<div class="field-group">
...............
....................
<div class="field field-omschrijving">
<label class="label">E-mailadres</label><div>#client.email</div>
</div>
<div class="field field-omschrijving field-last">
<label class="label">Telefoonnummer</label><div>#client.phoneNumber</div>
</div>
<input type="submit" class="form-submit" value="Change" name="op">
</div><!-- /.field-group -->
I've been looking for a solution but no success, any idea about how can I do it? Thanks!
Thanks so much for the fast response! But.. my mistake, what I wanted to say is that the fields should appear in a "normal way" and when the user clicks the button change it should change to an "editable way", right now the field email looks like this:!
I want it looks like this:
And after clicking in the "Change" button it has to look like the first image. Thanks again!

Using this code after click you can change your label to input, as in you pictures.
It will help you now, hope
$( ".button_class" ).click(function() {
$('.class_Of_label_email').replaceWith($('<input>' + $('.class_Of_label_email').innerHTML + '</input>'));
});
Here is an example:
<div class="container">
<div class="first">Hello</div>
<div class="second">And</div>
<div class="third">Goodbye</div>
</div>
$( ".container" ).click(function() {
$( "div.second" ).replaceWith( "<h2>New heading</h2>" );
}
Result is:
<div class="container">
<div class="inner first">Hello</div>
<h2>New heading</h2>
<div class="inner third">Goodbye</div>
</div>
Hope, it will help

Give id to button and input fields for email and ph no.
On click of button, hide the lebel and show input fields.
<div class="field-group">
<div class="field field-omschrijving">
<label class="label">E-mailadres</label>
<div id="divemail">#client.email</div>
<div id="divemailinput"><input type="text" id="emailId"/></div>
</div>
<div class="field field-omschrijving field-last">
<label class="label">Telefoonnummer</label>
<div id="divno">#client.phoneNumber</div>
<div id="divnoinput"><input type="text" id="emailId"/></div>
</div>
<input id="btnchange" type="submit" class="form-submit" value="Change" name="op"/>
</div><!-- /.field-group -->
JS
$("#btnchange").click(function(){
$("#divemail").hide();
$("#divemailinput").hide();
$("#divno").hide();
$("#divnoinput").hide();
});

For the first you need is put your
#client.emailand #client.phoneNumber into inputs and set them inactive.
Then, and after clicking change them to active by using javascript.
<input type="text" class="emailand_clas" readonly="readonly" >#client.emailand </input>
and using jquery:
$( ".button_class" ).click(function() {
$('.emailand_clas').attr('readonly','')
});
Some thing like this

Look at this JSFiddle or my blog for a great example.
http://jsfiddle.net/biniama/YDcFF/
<!DOCTYPE html>
<head>
<title>jQuery enable/disable button</title>
<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
<script type='text/javascript'>
$(function(){
$('#submitBtn').click(function(){
$('.enableOnInput').prop('disabled', false);
$('#submitBtn').val('Update');
});
});
</script>
<style type='text/css'>
/* Lets use a Google Web Font :) */
#import url(http://fonts.googleapis.com/css?family=Finger+Paint);
/* Basic CSS for positioning etc */
body {
font-family: 'Finger Paint', cursive;
background-image: url('bg.jpg');
}
#frame {
width: 700px;
margin: auto;
margin-top: 125px;
border: solid 1px #CCC;
/* SOME CSS3 DIV SHADOW */
-webkit-box-shadow: 0px 0px 10px #CCC;
-moz-box-shadow: 0px 0px 10px #CCC;
box-shadow: 0px 0px 10px #CCC;
/* CSS3 ROUNDED CORNERS */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background-color: #FFF;
}
#searchInput {
height: 30px;
line-height: 30px;
padding: 3px;
width: 300px;
}
#submitBtn {
height: 40px;
line-height: 40px;
width: 120px;
text-align: center;
}
#frame h1 {
text-align: center;
}
#frame div {
text-align: center;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id='frame'>
<div class='search'>
<h1>jQuery Enable and Disable button</h1>
<input type='text' name='searchQuery' id='searchInput' class='enableOnInput' disabled='disabled'/>
<input type='submit' name='submit' id='submitBtn' value='Edit'/>
</div>
</div>
</body>
</html>

Now HTML5 is available so .
We can use attribute
contenteditable
More help and details
http://html5doctor.com/the-contenteditable-attribute/

<label class="label">E-mailadres</label>
<input type="text" class='email' value='#client.email' />
document.getElementsByClassName('form-submit').onclick=function(){
document.getElementsByClassName('email').disabled=false;
};