Im implementing a site with shopping cart features and want the user to be able to select the color for the product they are purchasing.
Let's say I started with something like this:
<form action="">
<input type="radio" name="color" value="red" />
<input type="radio" name="color" value="green" />
<input type="radio" name="color" value="black" />
</form>
What CSS is needed to show coloured boxes for each of the options, with the boxes displayed horizontally and have a border around the selected option?
Along the lines of:
[redbox] [greenbox] [blackbox]
You can check out jQuery UI's Button http://jqueryui.com/demos/button/#radio
It allows you to create nice styles for checkboxes/radio buttons and so on..
I'm not sure if you'd want to use a whole framework for that though, but as far as I know, radio buttons aren't very 'stylable'. You'd need to create another element next to it, and change the selected value of the radio button programatically.
Hope this helps,
Marko
Because each browser is going to render the button differently, I would use a series buttons that are altering the state of a hidden input field. (I didn't test this, but it's the general idea):
<form id="myForm" action="">
<input type="hidden" id="color" name="color" value="red" />
<button type="button" style="background-color:red; width:50px; height:50px;"></button>
<button type="button" style="background-color:green; width:50px; height:50px;"></button>
<button type="button" style="background-color:blue; width:50px; height:50px;"></button>
</form>
<script>
/* I like jQuery, sue me ;) */
$(function() {
$('#myForm button').click(function() {
$('#color').val($(this).css('background-color'));
$(this).siblings('button').css('border','none');
$(this).css('border','2px solid black');
});
});
</script>
I would think that you wouldn't use radio boxes. You can have a hidden input field that stores the color, and 3 div's for the color boxes. onclick events would handle setting the classes so the selected item has the border and the hidden value is set.
Using jQuery it would look something like this:
<style type=text/css>
.cchoice { width:10px; height:10px; }
.red { background-color: red; }
.green { background-color: green; }
.blue { background-color: blue; }
.cpicked { border:2px solid yellow; }
</style>
<input type="hidden" name="colorChoice" id="colorChoice" value="">
<div id="cc_Red" class="cchoice red" onclick="makeChoice('red');">
<div id="cc_Green" class="cchoice green" onclick="makeChoice('green');">
<div id="cc_Blue" class="cchoice blue" onclick="makeChoice('blue');">
<script type=text/javascript>
function makeChoice(col) {
if (col != 'green') $('#cc_Green').removeClass('cpicked');
if (col != 'blue') $('#cc_Blue').removeClass('cpicked');
if (col != 'red') $('#cc_Red').addClass('cpicked');
$('#colorChoice').val(col);
}
</script>
Even if I have some syntax wrong, maybe this will set you on the right path?.. let me know if I can be of more help.
Related
I have a form there are 4 options (they may be checkbox or radio).
I want to select multiple options but one is compulsory.
I know it is possible in JS/jQuery but I want a HTML/CSS based solution.
To be able to check multiple inputs, they must be checkboxes. (They could be radio buttons with different names, but you wouldn't be able to uncheck them once checked.)
So use checkboxes, and show the Submit button only if any are checked, using the general sibling selector (~):
input[type="Submit"] {
display: none;
}
input:checked ~ input[type="Submit"] {
display: inline;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit">
If you want the appearance of a disabled submit button, add a second button that is disabled.
When no input is clicked, show the disabled submit button only. When one or more inputs are clicked, show the enabled submit button only:
input[type="Submit"]:not([disabled]) {
display: none;
}
input:checked ~ input[type="Submit"]:not([disabled]) {
display: inline;
}
input:checked ~ input[disabled] {
display: none;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit" disabled>
<input type="Submit">
Further to the answer of #Rick Hitchcock, I think that you will want to show to the user the button submit but it will disabled until one of the checkboxes will be checked.
If so, you can use pointer-events (in all modern browsers: http://caniuse.com/#feat=pointer-events) like this:
input[type="Submit"] {
opacity:0.5;
pointer-events:none;
/* animation added for fancy ;) */
transition:all .2s ease;
}
input:checked ~ .button-wrapper input[type="Submit"] {
opacity:1;
pointer-events:all;
}
.button-wrapper {
position:relative;
display:inline-block;
}
.button-wrapper:before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
input:checked ~ .button-wrapper:before {
display:none;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<div class="button-wrapper">
<input type="Submit" tabindex="-1">
</div>
Edit I was added a "mask" in .button-wrapper:before so it will work in the old browsers.
You can do this in html5 using the required attribute
Like
<input type="checkbox" required name="your_checkbox_name">
This tells the browser that the form should not be to submitted without the checkbox being checked.Although i recommend java-script since not all browsers will be able to recognize this.
Or
If you want to detect if at least one check box is selected as suggested by #RickHitchcock in the comments,You could use
span {
display: inline;
color: red;
}
input[type="Submit"],
input:checked ~ span {
display: none;
}
input:checked ~ input[type="Submit"] {
display: inline;
}
<form action="#" method="post">
<input type="checkbox" />Checkbox 1
<br />
<input type="checkbox" />Checkbox 1
<br />
<input type="checkbox" />Checkbox 1
<br />
<input type="submit" value="Submit" /><span>! Please check at least one checkbox</span>
</form>
You can use the following for which one is compulsory.
<input type="radio" name="name" required>
Which one without required will not be tested if it is ticked or not.
Try This:
<input id="c3" type="checkbox" required><label for="c3">Third</label><br>
<input id="c4" type="checkbox" required><label for="c4">Fourth</label><br>
Or you can try this using jquery to validate a html checkbox:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" always required. Nothing and blanks are invalid. </title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required: </label>
<input type="text" class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"> </script>
<script src="http://jqueryvalidation.org/files/dist/additional- methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true
}
}
});
</script>
</body>
</html>
required is the way html validates things
I am trying to get a focus on a field change the color of a text, but whatever I try: it is not working. Below is the HTML:
.register-section input:focus + .register-section label[for=signup_username] {
color: #ffffff !important;
}
<div class="register-section" id="basic-details-section">
<h4>Account Details</h4>
<label for="signup_username">Username (required)</label>
<input type="text" name="signup_username" id="signup_username" value="" />
</div>
Can anyone tell me what I'm doing wrong?
Thanks in advance!
The + adjacency operator can only be used to select DOM nodes following the initial selector (CSS selectors can only resolve in this direction). As such, because your label is before your input in your html, you cannot select it on the :focus state of the input using CSS.
To fix this, you will need to change your HTML to reverse the order of the elements, and adjust your CSS to change their display order, then select as appropriate:
.register-section label[for=signup_username] {
float: left;
}
.register-section input:focus + label[for=signup_username] {
color: #ffffff !important;
}
<div class="register-section" id="basic-details-section">
<h4>Account Details</h4>
<input type="text" name="signup_username" id="signup_username" value="" />
<label for="signup_username">Username (required)</label>
</div>
An alternative for those who wish to achieve the same result using jQuery, target the focus and blur events of the input field to change the color of the label:
$('#signup_username').on('focus blur', function(e){
var label = $("label[for=signup_username]");
if (e.type == 'focus'){
label.css('color','#FFF');
}
else {
label.css('color','#000');
}
});
See JSFiddle
I am trying to make two hyperlinked buttons go side by side. I saw this question but can not make the answers work. Below are my two attempts to make the buttons go side by side. The first attempt works but hyperlinks to the wrong location. The second one hyperlinks correctly but is not side by side. The third based on this question doesn't link anywhere but I think that has to do with using links instead of Javascript:submitRequests().
<!DOCTYPE html>
<html>
<body>
<head>
<style>
.container {
overflow: hidden;
}
button {
float: left;
}
button:first-child {
margin-right: 5px;
}
</style>
</head>
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 1
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
</form>
Attempt 2
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form><form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 3
<div class="container">
<button onclick="http://trinker.github.io/qdap_dev/paste2.html">paste2</button>
<button onclick="http://trinker.github.io/qdap_dev/colSplit.html">colSplit</button> text
</div>
</body>
</html>
If you just need plain links to work, just use links and style them to look like buttons (see also Styling an anchor tag to look like a submit button):
<style>
.button {
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
font: menu;
color: ButtonText;
display: inline-block;
padding: 2px 8px;
}
</style>
<div class="container">
paste2
colSplit text
</div>
You could also do <button>paste2</button> but this is not actually legal HTML5. FWIW, Firefox does seem to render it correctly though.
buttons would line up side by side automatically since they're display: inline-block by default (I think). I'd remove the float: left since it could be causing some issues when nesting.
You should never nest forms. It'll lead to some really screwy things.
However, if you want two forms side by side you can make them do that by adding display: inline to them. Here's a small demo: http://jsbin.com/UgaMiYu/1/edit
The onclick attribute should't make any difference at all.
I just tried to add css to attempt 2. how about this:
HTML:
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2"/></form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit"/>
</form>
CSS:
form{
float:left;
}
DEMO: http://jsfiddle.net/uzDZN/
NOTE: Add class to form which has this buttons. Otherwise css may effect other form elements in website.
Utilizing regular buttons and setting their display property to either inline or inline-block worked for me.
Is it possible to create a radio button group without the round buttons in front of each element?
The reason I would like to implement this is, that in my case the user has to choose between 3 different languages and I would really like to add this selection to a <form> tag, change the color of the selected language and make it required, but in the same time I wanted it to look something like this:
___________________________
| Username | <--Text input
___________________________
___________________________
| Password | <--Text input
___________________________
____________________________
| EN | DE | FR | <--This is what I thought of... Horizontal selection
____________________________ of the language looking like a simple table with
3 rows and the plain text (EN, DE, FR) in it.
____________________________
| Login | <--Submit button
____________________________
I really hope that you're able to get my point :)
If you put the radio buttons inside the labels and then make them invisible the user can click the label to select the radio button that is inside it. Consider the following approach.
HTML:
<div>
<label><input type="radio"/>English</label>
<label><input type="radio"/>French</label>
</div>
CSS:
label > input[type=radio] {
visibility: hidden;
}
JSFiddle here: http://jsfiddle.net/gEXUT/
Note that this is just an example, you'd still need to add the radio group name and perhaps the option for German etc.
Yes and no.
If you build your form with input and labels, it will do, else,
you have to. :)
the idea is :
input[type=radio] {
position:fixed;
left:-9999px;
}
As being fixed and of the screen, your input radio won't be in the flow anymore.
If labels are well formed and link to theme with attribute for, you just need to clikc the label to checked your invisible radio input.
To style your form, don't mind those imputs, style your labels as wished.
<input type="radio" name="r-lang" id="r1"><label for="r1"> EN </label>
Cheers
I've actually written on this before, and made a jsfiddle example:
http://jsfiddle.net/Kyle_Sevenoaks/HzQBE/
I'll explain it though. (I've put the labels an radio buttons into a list for this example)
<li class="cardtype-item">
<input type="radio" name="preferred_color" id="red" value="Red" />
<label for="red"> Red</label>
</li>
The general idea is that you have labels linked to the radio buttons, but the radios are hidden (either by display, position, etc). Then you use CSS to style the labels exactly as you like, and because they're linked to the radio buttons (via "name" on the input and "for" on the label) you can have much more control over how they look.
li
{
background: #333;
color: #eee;
padding: 10px;
list-style-type: none;
float: left;
width: 100px;
}
li.selected
{
background: #eee;
color: #333;
box-shadow:inset 0px 0px 15px #999;
}
input[type=radio]
{
display: none;
}
The next part of the trick is to use Javascript (I've use jQuery) to add and remove the selected or active class on the label itself.
$('li.cardtype-item label, li.cardtype-item input').click( function() {
$(this).parents('li').addClass('selected');
$(this).parents().siblings('li').removeClass('selected');
});
var ident = $('input[type=radio]').attr("id");
if($('input[type=radio]').is('checked')) {
$('form').append(ident);
};
I hope this gives you pretty much what you're after.
try this
radio button html
<div class="buttonSlider">
<input type="radio" value=".." name="radio1" />
<input type="radio" value=".." name="radio1" />
<input type="radio" value=".." name="radio1" />
</div>
javascript
$(document).ready(function () {
$('.buttonSlider input').replaceWith('<div class="radiobox"> <input type="radio" name="radio1" value=".."/></div>');
$('.buttonSlider input').prop('checked', false);
$('.radiobox').click(function () {
var this_div = $(this);
if (this_div.find('input').is(':checked')) {
this_div.find('input').prop('checked', false);
this_div.css({ 'background-color': '#800001' });
}
else {
this_div.find('input').prop('checked', true);
this_div.css({ 'background-color': '#808080' });
}
})
})
css
.buttonSlider
{
background-color: #800001;
}
.buttonSlider .radiobox
{
height: 20px;
width: 100px;
border: 1px solid black;
background-color: #800001;
float: left;
}
.buttonSlider input
{
display: none;
}
Thanks to the help of everyone of you (and this awesome answer). I could finally implement it in my website.
This is my code:
HTML:
<div id="language">
<table id="languagetable" border="0px" cellspacing="0px">
<tr>
<td width="33.33333%">
<input type="radio" id="fr" name="languageselection" value="en">
<label for="en">FR</label>
</td>
<td width="33.33333%">
<input type="radio" id="en" name="languageselection" value="de" checked>
<label for="de">EN</label>
</td>
<td width="33.33333%">
<input type="radio" id="it" name="languageselection" value="it">
<label for="de">DE</label>
</td>
</tr>
</table>
</div>
CSS:
#languagetable input[type="radio"] {
display:none;
}
#languagetable label {
display:inline-block;
margin: 0 auto;
font-family: Arial;
font-size: 20px;
}
#languagetable input[type="radio"]:checked + label {
color: #99CC00;
}
Like a lot of people, I'd like to customize the ugly input type=file, and I know that it can't be done without some hacks and/or javascript. But, the thing is that in my case the upload file buttons are just for uploading images (jpeg|jpg|png|gif), so I was wondering if I could use a "clickable" image which would act exactly as an input type file (show the dialog box, and same $_FILE on submitted page).
I found some workaround here, and this interesting one too (but does not work on Chrome =/).
What do you guys do when you want to add some style to your file buttons? If you have any point of view about it, just hit the answer button ;)
This works really well for me:
.image-upload>input {
display: none;
}
<div class="image-upload">
<label for="file-input">
<img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
</label>
<input id="file-input" type="file" />
</div>
Basically the for attribute of the label makes it so that clicking the label is the same as clicking the specified input.
Also, the display property set to none makes it so that the file input isn't rendered at all, hiding it nice and clean.
Tested in Chrome but according to the web should work on all major browsers. :)
EDIT:
Added JSFiddle here: https://jsfiddle.net/c5s42vdz/
Actually it can be done in pure css and it's pretty easy...
HTML Code
<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>
CSS Styles
label.filebutton {
width:120px;
height:40px;
overflow:hidden;
position:relative;
background-color:#ccc;
}
label span input {
z-index: 999;
line-height: 0;
font-size: 50px;
position: absolute;
top: -2px;
left: -700px;
opacity: 0;
filter: alpha(opacity = 0);
-ms-filter: "alpha(opacity=0)";
cursor: pointer;
_cursor: hand;
margin: 0;
padding:0;
}
The idea is to position the input absolutely inside your label. set the font size of the input to something large, which will increase the size of the "browse" button. It then takes some trial and error using the negative left / top properties to position the input browse button behind your label.
When positioning the button, set the alpha to 1. When you've finished set it back to 0 (so you can see what you're doing!)
Make sure you test across browsers because they'll all render the input button a slightly different size.
Great solution by #hardsetting,
But I made some improvements to make it work with Safari(5.1.7) in windows
.image-upload > input {
visibility:hidden;
width:0;
height:0
}
<div class="image-upload">
<label for="file-input">
<img src="https://via.placeholder.com/300x300.png?text=UPLOAD" style="pointer-events: none"/>
</label>
<input id="file-input" type="file" />
</div>
I have used visibility: hidden, width:0 instead of display: none for safari issue and added pointer-events: none in img tag to make it working if input file type tag is in FORM tag.
Seems working for me in all major browsers.
Hope it helps someone.
A much better way than writing JS is to use native,
and it turns to be lighter than what was suggested:
<label>
<img src="my-image.png">
<input type="file" name="myfile" style="display:none">
</label>
This way the label is automatically connected to the input that is hidden.
Clicking on the label is like clicking on the field.
You can replace image automatically with newly selected image.
<div class="image-upload">
<label for="file-input">
<img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
</label>
<input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
</div>
<script>
function previewFile(input){
var file = $("input[type=file]").get(0).files[0];
if(file){
var reader = new FileReader();
reader.onload = function(){
$("#previewImg").attr("src", reader.result);
}
reader.readAsDataURL(file);
}
}
</script>
I would use SWFUpload or Uploadify. They need Flash but do everything you want without troubles.
Any <input type="file"> based workaround that tries to trigger the "open file" dialog by means other than clicking on the actual control could be removed from browsers for security reasons at any time. (I think in the current versions of FF and IE, it is not possible any more to trigger that event programmatically.)
This is my method if i got your point
HTML
<label for="FileInput">
<img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
<input type="file" id="FileInput" style="cursor: pointer; display: none"/>
<input type="submit" id="Up" style="display: none;" />
</form>
jQuery
<script type="text/javascript">
$( "#FileInput" ).change(function() {
$( "#Up" ).click();
});
</script>
I have had lots of issues with hidden and not visible inputs over the past decade sometimes things are way simpler than we think.
I have had a little wish with IE 5,6,7,8 and 9 for not supporting the opacity and thus the file input would cover the upload image however the following css code has resolved the issue.
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
The following snipped is tested on chrome, IE 5,6,7,8,9,10 the only issue in IE 5 is that it does not support auto margin.
Run the snippet simply copy and paste the CSS and HTML modify the size as you like.
.file-upload{
height:100px;
width:100px;
margin:40px auto;
border:1px solid #f0c0d0;
border-radius:100px;
overflow:hidden;
position:relative;
}
.file-upload input{
position:absolute;
height:400px;
width:400px;
left:-200px;
top:-200px;
background:transparent;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.file-upload img{
height:70px;
width:70px;
margin:15px;
}
<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>
its really simple you can try this:
$("#image id").click(function(){
$("#input id").click();
});
You can put an image instead, and do it like this:
HTML:
<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1" name="file1" style="display:none" />
JQuery:
$("#upfile1").click(function () {
$("#file1").trigger('click');
});
CAVEAT:
In IE9 and IE10 if you trigger the onclick in a file input via javascript the form gets flagged as 'dangerous' and cannot be submmited with javascript, no sure if it can be submitted traditionaly.
The input itself is hidden with CSS visibility:hidden.
Then you can have whatever element you whish - anchor or image.., when the anchor/image is clicked, trigger a click on the hidden input field - the dialog box for selecting a file will appear.
EDIT: Actually it works in Chrome and Safari, I just noticed that is not the case in FF4Beta
Working Code:
just hide input part and do like this.
<div class="ImageUpload">
<label for="FileInput">
<img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
</label>
<input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer; display: none"/>
</div>
form input[type="file"] {
display: none;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Simple File Upload</title>
<meta name="" content="">
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<label for="fileToUpload">
<img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
</label>
<input type="File" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>
RUN SNIPPET or Just copy the above code and execute. You will get what you wanted. Very simple and effective without javascript. Enjoy!!!
<script type="text/javascript">
function upl() {
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.setAttribute('name', 'uploimg');
fileSelector.setAttribute('accept', 'image/*');
fileSelector.click();
fileSelector.style.display = "none";
fileSelector.onchange = function() {
document.getElementById("indicator").innerHTML = "Uploaded";
};
document.getElementById("par_form").appendChild(fileSelector);
}
</script>
<form id="par_form">
<img src="image_url" onclick="upl()"><br>
<span id="indicator"></span><br>
<input type="submit">
</form>