react.js
<div className='check'>
<input
type='checkbox'
className='checkbox'
id='termschkbx'
// style={{backgroundColor: "#DE1F48", color: "#30333F"}}
checked={this.state.isChecked}
// onClick={this.isClicked}
onChange= {this.isChecked}
>
</input>
<span>I agree to Terms & Conditions.<a href="" className='readme'>Read here</a> </span>
</div>
style.css
.checkbox{
top: -2px;
left:-45px;
width: 21px;
height: 21px;
opacity: 1;
display: inline-block;
margin-left:12px;
position: absolute;
}
.checkbox::after{
background: #DE1F48;
color: #30333F;
}
.checkbox:checked{
background: #DE1F48;
color: #30333F;
}
.checkbox input[type=checkbox]:checked {
background: #DE1F48;
color: #30333F;
}
nothing reflects on my checkbox after it is clicked. what can be done?
I even tried inline styling. That didn't work as well.
i did research about this, there were a lot of similar questions about this but nothing worked for me. I'm a new coder so excuseme if this is silly
Use input[type="checkbox"]:checked. This selects checkboxes that are checked.
Here's how to use it:
If the snippet is unavailable, use this JSFiddle link.
input[type=checkbox] {
height:0px;
width:0px;
}
input[type=checkbox]::after {
height:12px;
width:12px;
content:"\00a0\00a0\00a0\00a0";
border:1px solid black;
}
/* The magic below */
input[type=checkbox]:checked::after {
height:12px;
width:12px;
background-color:cyan;
content:"✓";
border:1px solid black;
}
<input type="checkbox" id="first" />
<label for="first" id="first">Here! A Checkbox!</label>
It also works for radio buttons:
input[type="radio"] {
width:0px;
height:0px;
}
input[type="radio"]::after {
content:"\00a0\00a0\00a0\00a0";
border-radius:5px;
height:10px;
width:10px;
position:absolute;
border:1px solid black;
display:inline;
}
input[type="radio"]:checked::after {
content:"✓";
background-color:#00ffff;
}
<div>
<input type="radio" name="radio" id="one" />
<label for="one">Option 1</label>
</div>
<hr>
<div>
<input type="radio" name="radio" id="two" />
<label for="two">Option 2</label>
</div>
<hr>
<div>
<input type="radio" name="radio" id="three" />
<label for="three">Option 3</label>
</div>
I am trying to make a form using HTML and CSS only. The problem is i am using valid pseudo-class to just give animation, but when it is invalid it mixes up with the label. the code will be at https://codepen.io/hardik-g1/pen/mdVzMyL and if you don't get please try this type number in name field you will see the problem.
code:
<div id="fle">
<div class="container">
<h2 id="aa">HACKATHON REGISTRATION</h2>
<form action="">
<div class="group">
<input type="text" value="" pattern="[a-zA-z]+" required title="No numbers or special characters allowed">
<label class="set">First Name</label>
</div>
<div class="group">
<input type="text" value="" pattern="[a-zA-z]+" required title="No numbers or special characters allowed">
<label class="set">Last Name</label></p>
</div>
<div class="group">
<input type="email" value="" required>
<label class="set">Email</label>
</div>
<div class="group">
<input type="number" value="" required pattern="[0-9].{10}" title="Enter correct mobile number">
<label class="set">Mobile number</label>
</div>
<div class="group">
<p>Branch</p>
<select name="branch" id="" required><option value=" ">Please select your branch</option><option value="cs">Computer Science</option>
<option value="it">Information Technology</option>
</select>
</div>
<div class="group"><p>Do you have participated before?</p>
Yes<input id="a" type="radio" name="hosting" value="yes">
No<input type="radio" id="a" name="hosting" value="no">
</div>
<div class="group" id="c">
<p>Project Description</p>
<textarea name="comment" placeholder="Write Here" rows="4" cols="40" required></textarea>
</div>
<input id="b" type="checkbox" id="Agree" name="agree" value="yes" required> Click here to agree to all the information above is true.
<p><button class="button" type="submit"><span>Register</span></button></p>
</form>
</div>
<div>
<video id="video" width="860" onclick="play();">
<source type="video/webm" src="https://res.cloudinary.com/iatneh/video/upload/v1594920650/Virtual_Hackathon_copy_-_Biteable_kmyhcp.mp4"/>
</video>
<h1>Click on it to play</h1>
<p>All validations show when submitted</p>
</div>
</div>
CSS
#fle{
display:flex;
}
body{
color:#999;
}
#aa{
color:black;
}
#b{
width: 12.5px;
margin:0;
}
#c{
margin:10px 0;
}
#a{
width:30px;
color:#999;
}
select{
width: 300px;
height: 30px;
}
.container {
font-family:'Roboto';
width:600px;
background:#FFF;
padding:10px 50px 50px;
}
.group {
position:relative;
margin-bottom:30px;
}
input {
font-size:18px;
padding:10px 10px 10px 5px;
width:300px;
border:none;
border-bottom:1px solid #757575;
}
input:focus{ outline:none; }
label {
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
}
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color:#5264AE;
}
input:invalid ~ label{
opacity:0.4;
}
.button {
border-radius: 4px;
background-color: #f4511e;
border:None;
color: #FFFFFF;
text-align: center;
font-size: 14px;
padding: 10px;
width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
You can listen to input changes and if it has a value inside add a class to keep the label floating.
Here is a sample you can modify and use it in your code (it will keep the .floating class on label as long has the input has content in it):
function checkForInput(element) {
const $label = $(element).siblings('label');
if ($(element).val().length > 0) {
$label.addClass('floating');
} else {
$label.removeClass('floating');
}
}
$('input.input').on('change keyup', function() {
checkForInput(this);
});
label.floating {
color:#5264AE;
/* use styles for floating your labels here */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<input type="text" name="some-name" class="input" />
<label class="input-label" for="textdemo">label</label>
</div>
I am confused. I got this form, jsfiddle:
https://jsfiddle.net/rx90f38u/1/
It has the styling in there and I can't work out why "remember" me shows under the checkbox.
The checkbox and label should be on same line and centered.
CSS:
.bbp-login-form input[type=text], .bbp-login-form input[type=password], .bbp-login-form select {
width: 100% !important;
display: inline-block !important;
border: 1px solid #ccc;
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-sizing: border-box;
color: #000;
background-color: #c1c1c1;
}
.bbp-login-form label {
text-align:left;
width: 100% !important;
margin: 10px 0;
display: inline-block !important;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
</head>
<body>
<h2 class="widgettitle">Support Forums</h2>
<form action="https://www.publictalksoftware.co.uk/wp-login.php" class="bbp-login-form" method="post">
<fieldset>
<div class="bbp-username">
<label for="user_login">Username: </label>
<input id="user_login" name="log" size="20" tabindex="103" type="text" value="">
</div>
<div class="bbp-password">
<label for="user_pass">Password: </label>
<input id="user_pass" name="pwd" size="20" tabindex="104" type="password" value="">
</div>
<div class="bbp-remember-me">
<input id="rememberme" name="rememberme" tabindex="105" type="checkbox" value="forever">
<label for="rememberme">Remember Me</label> </div>
</fieldset></form>
</body>
If I add this CSS then I get Remember Me center:
.bbp-login-form .bbp-remember-me label {
text-align: center;
width: 50%;
}
But even if I reduce the width still a problem.
Try this
.bbp-login-form .bbp-remember-me label {
text-align: left;
width: auto !important;
vertical-align: initial;
}
Try this css
.bbp-login-form label {
margin: 10px 0;
display: inline-block !important;
}
.bbp-remember-me{
text-align: center;
}
https://jsfiddle.net/jdfkbvrt/
You can use Flexbox to do the job .
.bbp-remember-me{
display:flex;
justify-content:center;
align-items:center;
}
https://jsfiddle.net/xh831fnd/1/
If I have a radio group with buttons:
... how can I show only images in the select option instead of the buttons, e.g.
Wrap radio and image in <label>
Hide radio button (Don't use display:none or visibility:hidden since such will impact accessibility)
Target the image next to the hidden radio using Adjacent sibling selector +
Don’t forget to provide alternative text in the alt attribute, especially since it functions as the radio button’s label
/* HIDE RADIO */
[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* IMAGE STYLES */
[type=radio] + img {
cursor: pointer;
}
/* CHECKED STYLES */
[type=radio]:checked + img {
outline: 2px solid #f00;
}
<label>
<input type="radio" name="test" value="small" checked>
<img src="https://via.placeholder.com/40x60/0bf/fff&text=A" alt="Option 1">
</label>
<label>
<input type="radio" name="test" value="big">
<img src="https://via.placeholder.com/40x60/b0f/fff&text=B" alt="Option 2">
</label>
Don't forget to add a class to your labels and in CSS use that class instead.
Custom styles and animations
Here's an advanced version using the <i> element and the ::after pseudo-element:
body{color:#444;font:100%/1.4 sans-serif;}
/* CUSTOM RADIO & CHECKBOXES
http://stackoverflow.com/a/17541916/383904 */
.rad,
.ckb{
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* RADIO & CHECKBOX STYLES */
/* DEFAULT <i> STYLE */
.rad > i,
.ckb > i{
display: inline-block;
vertical-align: middle;
height: 16px;
transition: 0.2s;
box-shadow: inset 0 0 0 8px #fff;
border: 1px solid gray;
background: gray;
}
.rad > i {
width: 16px;
border-radius: 50%;
}
.ckb > i {
width: 25px;
border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: gray;
}
.rad > input:focus + i { /* FOCUS <i> STYLE */
outline: 1px solid blue;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: orange;
}
/* CHECKBOX */
.ckb > input + i::after{
content: "";
display: block;
height: 12px;
width: 12px;
margin: 2px;
border-radius: inherit;
transition: inherit;
background: gray;
}
.ckb > input:focus + i {
outline: 1px solid blue;
}
.ckb > input:checked + i::after{ /* (RADIO CHECKED) <i> STYLE */
margin-left: 11px;
background: orange;
}
<label class="rad">
<input type="radio" name="rad1" value="a">
<i></i> Radio 1
</label>
<label class="rad">
<input type="radio" name="rad1" value="b" checked>
<i></i> Radio 2
</label>
<br>
<label class="ckb">
<input type="checkbox" name="ckb1" value="a" checked>
<i aria-hidden="true"></i> Checkbox 1
</label>
<label class="ckb">
<input type="checkbox" name="ckb2" value="b">
<i aria-hidden="true"></i> Checkbox 2
</label>
Example:
Heads up! This solution is CSS-only.
I recommend you take advantage of CSS3 to do that, by hidding the by-default input radio button with CSS3 rules:
.options input{
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
I just make an example a few days ago.
JSFiddle
How to use images for radio-buttons - Gist
You can use CSS for that.
HTML (only for demo, it is customizable)
<div class="button">
<input type="radio" name="a" value="a" id="a" />
<label for="a">a</label>
</div>
<div class="button">
<input type="radio" name="a" value="b" id="b" />
<label for="b">b</label>
</div>
<div class="button">
<input type="radio" name="a" value="c" id="c" />
<label for="c">c</label>
</div>
...
CSS
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
border: 1px solid red;
}
jsFiddle
Keep radio buttons hidden, and on clicking of images, select them using JavaScript and style your image so that it look like selected. Here is the markup -
<div id="radio-button-wrapper">
<span class="image-radio">
<input name="any-name" style="display:none" type="radio"/>
<img src="...">
</span>
<span class="image-radio">
<input name="any-name" style="display:none" type="radio"/>
<img src="...">
</span>
</div>
and JS
$(".image-radio img").click(function(){
$(this).prev().attr('checked',true);
})
CSS
span.image-radio input[type="radio"]:checked + img{
border:1px solid red;
}
Just using a class to only hide some...based on https://stackoverflow.com/a/17541916/1815624
/* HIDE RADIO */
.hiddenradio [type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* IMAGE STYLES */
.hiddenradio [type=radio] + img {
cursor: pointer;
}
/* CHECKED STYLES */
.hiddenradio [type=radio]:checked + img {
outline: 2px solid #f00;
}
<div class="hiddenradio">
<label>
<input type="radio" name="test" value="small" checked>
<img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>
<label>
<input type="radio" name="test" value="big">
<img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>
<div class="">
<label>
<input type="radio" name="test" value="small" checked>
<img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>
<label>
<input type="radio" name="test" value="big">
<img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>
Here is a simple jQuery UI solution based on the example here:
http://jqueryui.com/button/#radio
Modified code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Radios</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
</head>
<body>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1"><img src="image1.gif" /></label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2"><img src="image2.gif" /></label>
<input type="radio" id="radio3" name="radio"><label for="radio3"><img src="image3.gif" /></label>
</div>
</form>
</body>
</html>
jQueryUI takes care of the image background so you know which button is checked.
Beware: If you want to set a button to checked or unchecked via Javascript, you must call the refresh function:
$('#radio3').prop('checked', true).button("refresh");
Images can be placed in place of radio buttons by using label and span elements.
<div class="customize-radio">
<label>Favourite Smiley</label><br>
<label for="hahaha">
<input type="radio" name="smiley" id="hahaha">
<span class="haha-img"></span>
HAHAHA
</label>
<label for="kiss">
<input type="radio" name="smiley" id="kiss">
<span class="kiss-img"></span>
Kiss
</label>
<label for="tongueOut">
<input type="radio" name="smiley" id="tongueOut">
<span class="tongueout-img"></span>
TongueOut
</label>
</div>
Radio button should be hidden,
.customize-radio label > input[type = 'radio'] {
visibility: hidden;
position: absolute;
}
Image can be given in the span tag,
.customize-radio label > input[type = 'radio'] ~ span{
cursor: pointer;
width: 27px;
height: 24px;
display: inline-block;
background-size: 27px 24px;
background-repeat: no-repeat;
}
.haha-img {
background-image: url('hahabefore.png');
}
.kiss-img{
background-image: url('kissbefore.png');
}
.tongueout-img{
background-image: url('tongueoutbefore.png');
}
To change the image on click of radio button, add checked state to the input tag,
.customize-radio label > input[type = 'radio']:checked ~ span.haha-img{
background-image: url('haha.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{
background-image: url('kiss.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{
background-image: url('tongueout.png');
}
If you have any queries, Refer to the following link, As I have taken solution from the below blog,
http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html
Here is very simple example
input[type="radio"]{
display:none;
}
input[type="radio"] + label
{
background-image:url(http://www.clker.com/cliparts/c/q/l/t/l/B/radiobutton-unchecked-sm-md.png);
background-size: 100px 100px;
height: 100px;
width: 100px;
display:inline-block;
padding: 0 0 0 0px;
cursor:pointer;
}
input[type="radio"]:checked + label
{
background-image:url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-md.png);
}
<div>
<input type="radio" id="shipadd1" value=1 name="address" />
<label for="shipadd1"></label>
value 1
</div>
<div>
<input type="radio" id="shipadd2" value=2 name="address" />
<label for="shipadd2"></label>
value 2
</div>
Demo: http://jsfiddle.net/La8wQ/2471/
This example based on this trick: https://css-tricks.com/the-checkbox-hack/
I tested it on: chrome, firefox, safari
$spinTime: 3;
html, body { height: 100%; }
* { user-select: none; }
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Raleway', sans-serif;
font-size: 72px;
input {
display: none;
+ div > span {
display: inline-block;
position: relative;
white-space: nowrap;
color: rgba(#fff, 0);
transition: all 0.5s ease-in-out;
span {
display: inline-block;
position: absolute;
left: 50%;
text-align: center;
color: rgba(#000, 1);
transform: translateX(-50%);
transform-origin: left;
transition: all 0.5s ease-in-out;
&:first-of-type {
transform: rotateY(0deg) translateX(-50%);
}
&:last-of-type {
transform: rotateY(0deg) translateX(0%) scaleX(0.75) skew(23deg,0deg);
}
}
}
&#fat:checked ~ div > span span {
&:first-of-type {
transform: rotateY(0deg) translateX(-50%);
}
&:last-of-type {
transform: rotateY(0deg) translateX(0%) scaleX(0.75) skew(23deg,0deg);
}
}
&#fit:checked ~ div > span {
margin: 0 -10px;
span {
&:first-of-type {
transform: rotateY(90deg) translateX(-50%);
}
&:last-of-type {
transform: rotateY(0deg) translateX(-50%) scaleX(1) skew(0deg,0deg);
}
}
}
+ div + div {
width: 280px;
margin-top: 10px;
label {
display: block;
padding: 20px 10px;
text-align: center;
transition: all 0.15s ease-in-out;
background: #fff;
border-radius: 10px;
box-sizing: border-box;
width: 48%;
font-size: 64px;
cursor: pointer;
&:first-child {
float: left;
box-shadow:
inset 0 0 0 4px #1597ff,
0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
}
&:last-child { float: right; }
}
}
&#fat:checked ~ div + div label {
&:first-child {
box-shadow:
inset 0 0 0 4px #1597ff,
0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
}
&:last-child {
box-shadow:
inset 0 0 0 0px #1597ff,
0 10px 15px -20px rgba(#1597ff, 0);
}
}
&#fit:checked ~ div + div label {
&:first-child {
box-shadow:
inset 0 0 0 0px #1597ff,
0 10px 15px -20px rgba(#1597ff, 0);
}
&:last-child {
box-shadow:
inset 0 0 0 4px #1597ff,
0 15px 15px -10px rgba(darken(#1597ff, 10%), 0.375);
}
}
}
}
<input type="radio" id="fat" name="fatfit">
<input type="radio" id="fit" name="fatfit">
<div>
GET F<span>A<span>A</span><span>I</span></span>T
</div>
<div>
<label for="fat">🍕</label>
<label for="fit">💪🏼</label>
</div>
This works for me:
input[type="radio"] {
margin-right: 1em;
appearance: none;
width: 12px;
height: 12px;
background-image: url("checkbox_off.gif");
}
input[type="radio"]:checked {
background-image: url("checkbox_on.gif");
}
.big{ width: 2.5em; height: 1.5em; }
<p>
<input type="radio" name="r1" value="a" checked="checked" class="big" />
<span>Closed</span>
<input type="radio" name="r1" value="b" class="big" />
<span>Pending</span>
</p>
Now the text is coming down near the Radio button but it want the text should be in the center.
check this css
.big{ width: 2.5em;
display: inline-block;
vertical-align: top;
}
.align{height: 1.5em;}
.text-big{ font-size:1.2em}
.span{
display: inline-block;
vertical-align: top;
margin-right: 3%;
}
https://jsfiddle.net/tkp2007p/1/
You can use vertical align for this.
.big{ width: 2.5em; height: 1.5em; }
p span,
p .big{vertical-align: middle}
<p>
<input type="radio" name="r1" value="a" checked="checked" class="big" />
<span>Closed</span>
<input type="radio" name="r1" value="b" class="big" />
<span>Pending</span>
</p>
.align{line-height: 1.5em;}
.big{ width: 2.5em; }
.text-big{ font-size:1.2em}
<p>
<span class="align">
<input type="radio" name="r1" value="a" checked="checked" class="big" />
<span class="text-big">Closed</span>
<input type="radio" name="r1" value="b" class="big" />
<span class="text-big">Pending</span>
</span>
</p>
Here I wrapped the entire radio and its text in a span with class align
And added line-height to that class.
try this
<p>
<input type="radio" name="r1" value="a" checked="checked" class="big" />
<span>Closed</span>
<input type="radio" name="r1" value="b" class="big" />
<span>Pending</span>
</p>
css:
.big{ width: 2.5em; height: 1.5em; }
.big+span{
font-size:15px;
}
.big ,.big+span{
vertical-align:middle;
}
https://jsfiddle.net
updated as per your request:
<p>
<input type="radio" name="r1" value="a" checked="checked" class="big" id="r1" />
<label for="r1">Closed</label>
<input type="radio" name="r1" value="b" class="big" id="r2"/>
<label for="r2">Pending</label>
</p>
css:
/* COMMON RADIO STYLES */
input[type=radio]{
/* hide original inputs */
visibility: hidden;
position: absolute;
}
input[type=radio] + label{
cursor:pointer;
}
input[type=radio] + label:before{
height:16px;
margin-right: 4px;
content: " ";
display:inline-block;
vertical-align: baseline;
transition: 0.3s;
border:1px solid #ccc;
border-radius:10px;
box-shadow: inset 0 -3px 6px #e4e4e4;
transition: 0.3s;
}
/* CUSTOM RADIO STYLES */
input[type=radio] + label:before{
border-radius:50%;
width:16px;
}
/* CHECKED */
input[type=radio]:checked + label:before{
box-shadow: inset 0 -1px 3px #e4e4e4, inset 0 0 1px #222, inset 0 0 0 3px yellow;
background:#000;
}
output:
https://jsfiddle.net