PDA

View Full Version : How to insert "radio-button" inside CSS box?



jnpereira
03-20-2015, 06:26 AM
Hello everyone,

I am creating a 'quiz page' and topics are arranged alphabetically (A B C D...Z).

Have created a 'box' using CSS and the color of the box changes for the topics completed. But my real problem is I am unable to place the "radio-button" inside the box, when placed the script does not work.

---Script used---


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quizz_Buttons</title>

<style>

/*Body font*/

body {
font-family:Arial, "Arial Black", "Arial Narrow", "Arial Unicode MS";
margin:10px 10px 10px 10px;
}

/*Button*/

div {
width: 50px;
height: 50px;
border: 2px solid #fad6be;
border-radius: 10px;
background: #ff6600;
}

input[type="checkbox"]{
display: none;
position: fixed;
top:100px;
right:30px;
}
input[type="checkbox"]:checked + div{
background: #fad6be;
}

</style>

</head>

<body>

<label for="check" class="btn btn-default">A</label>
<input type="checkbox" id="check" />
<div></div>

</body>
</html>


Can someone help me with this issue. Thank you.

Regards,
Nitin

VIPStephan
03-20-2015, 08:53 AM
What do you mean by “the script doesn’t work”?
I suppose you intended to put the radio button inside the div but obviously you didn’t, you put it before the div.

ramarjun
03-20-2015, 04:26 PM
inside the div to add lable size and module for input button
label {
position:relative;
cursor:pointer;
}
label [type="checkbox"] {
display:none; /* use your custom sprites instead as background on the span */
}
[type="checkbox"] + span {
display:inline-block;
padding:1em;
}

jnpereira
03-23-2015, 06:27 AM
inside the div to add lable size and module for input button
label {
position:relative;
cursor:pointer;
}
label [type="checkbox"] {
display:none; /* use your custom sprites instead as background on the span */
}
[type="checkbox"] + span {
display:inline-block;
padding:1em;
}


Hi Ram,

Thank you very much for responding to my post. Will give this a shot...:)

Regards,
Nitin

jnpereira
03-23-2015, 06:28 AM
Well I tried, but the it did not work :(

jnpereira
03-23-2015, 06:29 AM
What do you mean by “the script doesn’t work”?
I suppose you intended to put the radio button inside the div but obviously you didn’t, you put it before the div.

Well I tried, but the it did not work :(

patriknighter
03-23-2015, 04:22 PM
You did not placed the radio button "inside" the div.

Your code was like:

[radio button]
<div></div>

-----------------

It should be

<div>
[radio button]
</div>

--------------------------------
Your html code (http://patrikjohanson.se/) should look like these:

<div>
<label for="check" class="btn btn-default">A</label>
<input type="checkbox" id="check" />
</div>