Styling checkboxes, radio buttons and dropdowns
see this 2 links for jQuery Plugins for Styling Checkbox & Radio Buttons:
http://line25.com/articles/jquery-plugins-for-styling-checkbox-radio-buttons
http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements
css ONLY styling checkboxes and radio buttons
You can do it with HTML / CSS and a bit of JS, but it's a bit tricky, and not very clean.
First of all, you need to wrap your checkboxes with another HTML element (div or whatever) and hide your checkbox element (display: none).
Then, stylise the wrapper element to fit to your custom checkbox, with an unchecked state (as a default) and a checked state (use a class).
Finaly, use a bit of JS to manage clicks to the wrapper element. Working Fiddle, with jQuery (as i'm lazy) :
$('.wrapperCheckbox').click(function () {
var checkbox = $(this).find('input[type="checkbox"]');
var checked;
$(this).toggleClass('checked');
if(checkbox.is(':checked')){
checked = false;
}
else {
checked = true;
}
checkbox.attr('checked', checked);
});
http://jsfiddle.net/49Xg2/2/
As you can see, it's only about plugin the wrapper to its child checkbox and it surely will be lighter than using a lib for this. Note that I didn't test it, so it's probably wrong, but it shows you how to do it.
I know you don't wanna use JS, but you can't get your result only with HTML / CSS 100% working on all major browsers.
Radio, Dropdown, Check on same line
try using it like this..
<div class="form-check">
<label class="form-check-label">
<input style="height:1em; width:1em;" type="radio" class="form-check-input" value="popular" name="abc" checked>Popular
</label>
</div>
<div class="form-check">
<div style="display:inline-block;">
<label class="form-check-label">
<input style="height:1em; width:1em;" type="radio" class="form-check-input" value="order" name="abc" checked>Order
</label>
<select id="user_tag_dropdown">
<option>One</option>
<option>Two</option>
</select>
<div class="checkbox" style="display: inline">
<label>
<input type="checkbox"> All
</label>
</div>
</div>
</div> How to fix the select option dropdown with a radio/checkbox button
Try this
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="radio" id="one" name="select"/>First checkbox</label>
<label for="two">
<input type="radio" id="two" name="select"/>Second checkbox</label>
<label for="three">
<input type="radio" id="three" name="select"/>Third checkbox</label>
</div>
</div>
</form>Styling checkboxes & radio buttons
Unfortunately, I must have not been clear, yes, there are very flexible and nice things you can do with jQuery, CSS (X)HTML and Whatever else... but in essence, they convert the input into a div. It was also hard to find something good for select drop downs. I ended up finding this for the select boxes and I am going to try to see if I can do something similar for checkboxes and radio buttons. http://bavotasan.com/2011/style-select-box-using-only-css/
I just found something perfect. http://acidmartin.wordpress.com/2011/06/23/imageless-css-3-custom-checkboxes-and-radio-buttons/
Although the colors and font is pretty ugly, it accomplishes what I needed it to, plus those are easy to change.
Drop-down menu and radio button can't be selected
You have used position: relative in wrong way. That is creating the problem. I have commented it. And add vertical-align: top; for labels and submit button.
.header {
margin: 2%;
}
#survey-form {
background: #722f2d;
margin: 0 auto;
border-radius: 5px;
width: 50%;
padding: 10px;
}
.labels {
display: inline-block;
text-align: right;
width: 40%;
padding: 5px;
margin-top: 10px;
vertical-align: top;
}
.inputs {
display: inline-block;
text-align: left;
}
.fields {
width: 210px;
border-radius: 5px;
}
#submit {
vertical-align: top;
}
/* .radio-buttons {
position: relative;
bottom: 55px;
display: block;
}
.radio {
position: relative;
top: 70px;
right: 30px;
display: block;
}
.checkboxes{
position: relative;
bottom: 145px;
}
.checkbox{
position: relative;
top: 164px;
right: 30px;
}
.lbl {
position: relative;
bottom: 2px;
left: 3px;
}
textarea {
margin-top: 4%;
}
#submit {
position: relative;
bottom: 91px;
margin: 10px;
}*/<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="header">
<h1 class="text-center" id="title">Survey</h1>
<p class="text-center" id="description">Let us know how to improve this survey</p>
</div>
<form id="survey-form">
<div class="input-name">
<div class="labels">
<label for="name" id="name-label">* Name:</label>
</div>
<div class="inputs">
<input type="text" placeholder="Enter full name" id="name" class="fields">
</div>
</div>
<div class="input-email">
<div class="labels">
<label for="email" id="email-label">* Email:</label>
</div>
<div class="inputs">
<input type="text" placeholder="Enter email" id="email" class="fields">
</div>
</div>
<div class="input-age">
<div class="labels">
<label for="number" id="number-label">* Age:</label>
</div>
<div class="inputs">
<input type="number" placeholder="Age" id="number" class="fields">
</div>
</div>
<div class="labels">
<label>What are you?</label>
</div>
<div class="inputs">
<select id="dropdown">
<option>Student</option>
<option>Full time employee</option>
<option>Part time employee</option>
<option>Self-learner</option>
<option>Prefer not to say</option>
<option>Other</option>
</select>
</div>
<div class="radio-buttons">
<div class="labels">
<label>Do you like this survey?</label>
</div>
<div class="inputs">
<ul style="list-style:none">
<li class="radio"><input type="radio" id="male" value="1"><label for="male" class="lbl">Yes</label></li>
<li class="radio"><input type="radio" id="female" value="2"><label for="female" class="lbl">No</label></li>
<li class="radio"><input type="radio" id="other" value="3"><label for="other" class="lbl">Meh</label></li>
</ul>
</div>
</div>
<div class="checkboxes">
<div class="labels">
<label>How should I improve?</label>
</div>
<div class="inputs">
<ul style="list-style:none">
<li class="checkbox"><input type="checkbox" value="1" id="add"><label for="add" class="lbl">Add more detail</label></li>
<li class="checkbox"><input type="checkbox" value="2" id="clean"><label for="clean" class="lbl">Clean it up</label></li>
<li class="checkbox"><input type="checkbox" value="3" id="design"><label for="design" class="lbl">Design it better</label></li>
<li class="checkbox"><input type="checkbox" value="4" id="create"><label for="create" class="lbl">Someone else should create the survey</label></li>
<li class="checkbox"><input type="checkbox" value="5" id="confidence"><label for="confidence" class="lbl">Have confidence</label></li>
<li class="checkbox"><input type="checkbox" value="6" id="more"><label for="more" class="lbl">Add more buttons</label></li>
</ul>
</div>
</div>
<div class="text-box text-center">
<textarea rows="4" cols="30" placeholder="Enter your comments here..."></textarea>
<button type="button" id="submit">Submit</button>
</div>
</form>
</div>How to add radio buttons, checkboxes and select field in a multi step javascript form?
I tried the best to do what you asked, you will see that I added 3 divs to include your different requests
I also modify your validate condition
Hoping it can help you
var questions = [
{
question: "What's your full name?",
type: "text"
}, // TEXT INPUT FIELD
{
question: "What's your gender?",
type: "radio",
response: ['male','female','other']
}, // RADIO BUTTONS {male, female, other}
{
question: "What's your date of birth?",
type: "date"
}, // TEXT INPUT FIELD WITH id="datepicker"
{
question: "What's your country?",
type: "select",
response: ['UK','FR','DE']
}, // SELECT BOX WITH LIST OF COUNTRIES IN IT
{
question: "Interest in?",
type: "checkbox",
response: ['male','female','other']
} // CHECKBOXES {male, female, other}
]
//do something after the questions have been answered
var onComplete = function() {
var h1 = document.createElement('h1')
h1.appendChild(document.createTextNode('Thanks ' + questions[0].answer + ' for checking this pen out!'))
setTimeout(function() {
register.parentElement.appendChild(h1)
setTimeout(function() { h1.style.opacity = 1 }, 50)
}, 1000)
}
;(function(questions, onComplete) {
var tTime = 100 // transition transform time from #register in ms
var wTime = 200 // transition width time from #register in ms
var eTime = 1000 // transition width time from inputLabel in ms
// init
if (questions.length == 0) return
var position = 0
putQuestion()
forwardButton.addEventListener('click', validate)
inputField.addEventListener('keyup', function(e) {
transform(0, 0) // ie hack to redraw
if (e.keyCode == 13) validate()
})
previousButton.addEventListener('click', function(e) {
if (position === 0) return
position -= 1
hideCurrent(putQuestion)
$('#gender').hide();
$('#country').hide();
$('#interest').hide();
})
// load the next question
function putQuestion() {
$('#gender').hide();
$('#country').hide();
$('#interest').hide();
$(inputField).attr('readonly',false);
$(inputField).attr('required',false);
inputLabel.innerHTML = questions[position].question;
inputField.type = 'text';
switch(questions[position].type){
case "text":
$(inputField).attr('required',true)
inputField.value = questions[position].answer || '';
break;
case "radio":
$(inputField).attr('readonly',true)
inputField.value = '';
let nbrGender = questions[position].response;
if( $('#gender').children().length > 0 ){
$('#gender').children().remove()
}
$('#gender').show();
for( var $i = 0; $i < nbrGender.length; ++$i ){
let checkedGender = questions[position].answer == questions[position].response[$i] ? 'checked' : '';
$('#gender').append(
'<input type="radio" name="onlyone" value="'+questions[position].response[$i]+'" '+checkedGender+'>'+
'<label id="text'+$i+'">'+questions[position].response[$i]+'</label>'
);
}
break;
case "date":
inputField.type = 'date';
inputField.value = questions[position].answer;
break;
case "select":
$(inputField).attr('readonly',true)
inputField.value = '';
var nbrCountry = questions[position].response;
if( $('#country').children().length > 0 ){
$('#country').children().remove()
}
$('#country').show();
var optionCountry;
for( var $i = 0; $i < nbrCountry.length; ++$i ){
let selectedCountry = questions[position].answer == questions[position].response[$i] ? 'selected' : '';
optionCountry += '<option value="'+questions[position].response[$i]+'" '+selectedCountry+'>'+questions[position].response[$i]+'</option>'
}
$('#country').append(' <select name="gender" id="countryList">'+optionCountry+'</select>')
break;
case "checkbox":
$(inputField).attr('readonly',true)
inputField.value = '';
let nbrInterest = questions[position].response;
if( $('#interest').children().length > 0 ){
$('#interest').children().remove()
}
$('#interest').show();
for( var $i = 0; $i < nbrInterest.length; ++$i ){
let checkedInterest = questions[position].answer == questions[position].response[$i] ? 'checked' : '';
$('#interest').append(
'<input type="checkbox" name="onlyone" value="'+questions[position].response[$i]+'" '+checkedInterest+'>'+
'<label id="text'+$i+'">'+questions[position].response[$i]+'</label>'
);
}
break;
default:
inputField.type = 'text';
inputField.value = questions[position].answer || '';
break;
}
inputField.focus()
// set the progress of the background
progress.style.width = position * 100 / questions.length + '%'
previousButton.className = position ? 'ion-android-arrow-back' : 'ion-person'
showCurrent()
}
// when submitting the current question
function validate() {
var validateCore = function() {
if(inputField.type == "date" && inputField.value ){
questions[position].answer =inputField.value;
return true;
}else if ( inputField.type != "date" ){
if(inputField.value.match(questions[position].pattern || /.+/) ){
questions[position].answer =inputField.value;
return true;
}
else if( $('#countryList').is(':visible') && $('#countryList').find(':selected').length > 0 ){
questions[position].answer = $('#country').find(':selected')[0].value
return true;
}
else if( $('#gender').is(':visible') && $('#gender').find(':checked').length > 0 ){
questions[position].answer = $('#gender').find(':checked')[0].value
return true;
}else if( $('#interest').is(':visible') && $('#interest').find(':checked').length > 0 ){
let responseInterest = [];
$('#interest').find(':checked').each(function(){
responseInterest.push($(this).val());
});
questions[position].answer = responseInterest;
return true;
}
else{
return false;
}
}else{
return false
}
}
if (!questions[position].validate) questions[position].validate = validateCore
// check if the pattern matches
if (!questions[position].validate())
wrong(inputField.focus.bind(inputField))
else ok(function() {
// execute the custom end function or the default value set
if (questions[position].done) questions[position].done()
++position
// if there is a new question, hide current and load next
if (questions[position]) hideCurrent(putQuestion)
else hideCurrent(function() {
// remove the box if there is no next question
register.className = 'close'
progress.style.width = '100%'
onComplete()
})
})
}
// helper
function hideCurrent(callback) {
inputContainer.style.opacity = 0
inputLabel.style.marginLeft = 0
inputProgress.style.width = 0
inputProgress.style.transition = 'none'
inputContainer.style.border = null
setTimeout(callback, wTime)
}
function showCurrent(callback) {
inputContainer.style.opacity = 1
inputProgress.style.transition = ''
inputProgress.style.width = '100%'
setTimeout(callback, wTime)
}
function transform(x, y) {
register.style.transform = 'translate(' + x + 'px , ' + y + 'px)'
}
function ok(callback) {
register.className = ''
setTimeout(transform, tTime * 0, 0, 10)
setTimeout(transform, tTime * 1, 0, 0)
setTimeout(callback, tTime * 2)
}
function wrong(callback) {
register.className = 'wrong'
for (var i = 0; i < 6; i++) // shaking motion
setTimeout(transform, tTime * i, (i % 2 * 2 - 1) * 20, 0)
setTimeout(transform, tTime * 6, 0, 0)
setTimeout(callback, tTime * 7)
}
}(questions, onComplete))
// load the next question
function putQuestion() {
inputLabel.innerHTML = questions[position].question
inputField.type = questions[position].type || 'text'
inputField.value = questions[position].answer || ''
inputField.focus()
// set the progress of the background
progress.style.width = position * 100 / questions.length + '%'
previousButton.className = position ? 'ion-android-arrow-back' : 'ion-person'
showCurrent()
}@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
body {
margin: 0;
background: #fbc02d;
font-family: 'Roboto', sans-serif;
overflow-x: hidden;
}
h1 {
position: relative;
color: #fff;
opacity: 0;
transition: .8s ease-in-out;
}
#progress {
position: absolute;
background: #c49000;
height: 100vh;
width: 0;
transition: width 0.2s ease-in-out;
}
.center {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#register {
background: #fff;
position: relative;
width: 550px;
box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);
transition: transform .1s ease-in-out;
}
#register.close {
width: 0;
padding: 0;
overflow: hidden;
transition: .8s ease-in-out;
box-shadow: 0 16px 24px 2px rgba(0,0,0,0);
}
#forwardButton {
position: absolute;
right: 20px;
bottom: 5px;
font-size: 40px;
color: #fbc02d;
float: right;
cursor: pointer;
z-index: 20
}
#previousButton {
position: absolute;
font-size: 18px;
left: 30px; /* same as padding on container */
top: 12px;
z-index: 20;
color: #9e9e9e;
float: right;
cursor: pointer;
}
#previousButton:hover {color: #c49000}
#forwardButton:hover {color: #c49000}
.wrong #forwardButton {color: #ff2d26}
.close #forwardButton, .close #previousButton {color: #fff}
#inputContainer {
position: relative;
padding: 30px 20px 20px 20px;
margin: 10px 60px 10px 10px;
opacity: 0;
transition: opacity .3s ease-in-out;
}
#inputContainer input {
position: relative;
width: 100%;
border: none;
font-size: 20px;
outline: 0;
background: transparent;
box-shadow: none;
}
#inputLabel {
position: absolute;
pointer-events: none;
top: 32px; /* same as container padding + margin */
left: 20px; /* same as container padding */
font-size: 20px;
transition: .2s ease-in-out;
}
#inputContainer input:valid + #inputLabel {
top: 6px;
left: 42px; /* space for previous arrow */
margin-left: 0!important;
font-size: 11px;
font-weight: normal;
color: #9e9e9e;
}
#inputProgress {
border-bottom: 3px solid #fbc02d;
width: 0;
transition: width .6s ease-in-out;
}
.wrong #inputProgress {
border-color: #ff2d26;
}
@media (max-width: 420px) {
#forwardButton {right: 10px}
#previousButton {left: 10px}
#inputLabel {left: 0}
#inputContainer {padding-left: 0; margin-right:20px}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<div id="progress"></div>
<div class="center">
<div id="register">
<i id="previousButton" class="ion-android-arrow-back"></i>
<i id="forwardButton" class="ion-android-arrow-forward"></i>
<div id="inputContainer">
<input id="inputField" />
<label id="inputLabel"></label>
<div id="inputProgress"></div>
<div id="gender"></div>
<div id="country"></div>
<div id="interest"></div>
</div>
</div>
</div>How to styles checkbox, radio button, dropdownlist by javascript?
Use CSS.
http://reference.sitepoint.com/css
You can use jQuery to manipulate the CSS properties of DOM elements on the client side:
http://api.jquery.com/css/
Related Topics
Fieldset Does Not Support Display: Table/Table-Cell
How to Create Custom Scrollbar for Mozilla Firefox with CSS
CSS Transform: Scale Does Not Change Dom Size
Changing Background Cell of Table Depending on Value
CSS Styling Won't Work in Outlook 2010
Does IE9 Not Support Display: Inline-Flex at All
CSS Nth-Of-Type Selector with Nested Elements
When Does Flex-Grow Switch to Flex-Shrink, and Vice-Versa
Why Does Width/Height Work on an Inline Img Element
Setting Up Line-Height via Tinymce
How to Use El for External CSS Files with Jsf
Ie10/11 Uses Transition:-Webkit-Transform
Silhouette a Png Image Using CSS
Are CSS Stylesheets Loaded Asynchronously