I am using wordpress to maintain a website. I would like to create a page with a few icons and a text box at the bottom. Depending on what icon is clicked, the text in the box underneath changes. Does anyone know a way to d this using basic html and css?
This is possible with hidden checkboxes. And a little hack.
Use the CSS sibling selector. This changes your styles on elements that are siblings on your checkbox. If the checkbox get's the pseudo-class :checked your text will change.
Try this out:
<input type="checkbox">
<p class="to-be-changed">Some Text.</p>
.to-be-changed {
color: black;
}
input[type=checkbox]:checked ~ .to-be-changed {
color: red;
}
it's only possible for custom script
$('#two').click(function(){
$('#count').val('2');
$('#total').text('Product price: $1000');
});
$('#four').click(function(){
$('#count').val('4');
$('#total').text('Product price: $2000');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id ='two' onclick="change()" value="2
Qty">
<input type="button" id ='four' class="mnozstvi_sleva" value="4
Qty">
<br>
Total <input type="text" id="count" value="">
Related
It's simple to apply CSS to checked/unchecked checkboxes (using :checked) and their labels. However, I need to apply another style to all checkboxes when all of them are unchecked.
This is relatively simple to implement using JavaScript but I have a widget which I'm not eager to modify so I'd like to know whether there's a CSS trick for that. I suspect that there isn't, but there's always somebody who's smarter :)
PS well, the html bit looks like this, nothing special:
<div>
<input type=checkbox id=chkFilterMath>
<span><label for=chkFilterMath>Math</label></span>
<input type=checkbox id=chkFilterHist>
<span><label for=chkFilterHist>History</label></span>
...
</div>
Current CSS uses the
input:not(:checked) + span label
selector to apply the styles to unchecked checkboxes/labels.
A simplified example may be found here: https://jsfiddle.net/k56hz8va/ I'd like to set color: black to the labels when all of checkboxes are unchecked.
Lasciate ogni speranza, voi ch’entrate
No. There are no such CSS selectors that allows to select previous DOM elements in dependence on state of following elements. See Is there a “previous sibling” CSS selector? and Is there a CSS parent selector? posts for details.
There is a hack around this that I use:
Hide the input itself, but keep the label. Then use the pseudo element ::before to insert some icon to denote checked / unchecked.
Here's a demo: https://codepen.io/anon/pen/WdrdPE
and the code:
<input id="option_1" type="checkbox"><label for="option_1">thing 1</label>
<input id="option_2" type="checkbox"><label for="option_2">thing 2</label>
<input id="option_3" type="checkbox"><label for="option_3">thing 3</label>
css:
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
input {
display:none;
}
label {
display:block;
}
input:checked + label {
color:red;
}
label:before {
content:"\f1db";
margin-right:.3em;
font-family:Fontawesome;
}
input:checked + label:before {
content:"\f058";
margin-right:.3em;
font-family:Fontawesome;
}
The #sashaikevich's idea is great but requires some work to solve your question. You could place the labels after all inputs. Then your CSS and HTML will be bulky, but you will be able to control styles of the labels in dependence on all inputs state.
Try to run the snippet below. The latest rule has highest priority, therefore if any (at least one) of checkboxes is checked, then the labels is black. Otherwise the labels is red.
[type=checkbox] {
display: none;
}
#check-box-1:checked~[for=check-box-1] .glyphicon-unchecked,
#check-box-2:checked~[for=check-box-2] .glyphicon-unchecked,
#check-box-3:checked~[for=check-box-3] .glyphicon-unchecked,
#check-box-1:not(:checked)~[for=check-box-1] .glyphicon-check,
#check-box-2:not(:checked)~[for=check-box-2] .glyphicon-check,
#check-box-3:not(:checked)~[for=check-box-3] .glyphicon-check
{
display: none;
}
[for] {
color: red;
}
[type=checkbox]:checked~[for] {
color: inherit;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="check-box-set">
<input id="check-box-1" type="checkbox" />
<input id="check-box-2" type="checkbox" checked="checked" />
<input id="check-box-3" type="checkbox" />
<label for="check-box-1">
<span class="glyphicon glyphicon-unchecked" aira-hidden="true"></span>
<span class="glyphicon glyphicon-check" aira-hidden="true"></span>
1
</label>
<label for="check-box-2">
<span class="glyphicon glyphicon-unchecked" aira-hidden="true"></span>
<span class="glyphicon glyphicon-check" aira-hidden="true"></span>
2
</label>
<label for="check-box-3">
<span class="glyphicon glyphicon-unchecked" aira-hidden="true"></span>
<span class="glyphicon glyphicon-check" aira-hidden="true"></span>
3
</label>
</div>
In the example I use Bootstrap Glyphicons. But it is possible to use another glyps, images or CSS shapes.
I am attempting to utilize the bootstrap "form-control" class on a checkbox within a label tag so that clicking the text also checks the textbox.
Here is the JSFiddle: https://jsfiddle.net/vpm13m2b/
The HTML for the control is:
<div class="form-group">
<div>
Attempt #1
<span class="red">*</span>
</div>
<label>
<input type="checkbox" class="form-control" /> Yes
</label>
</div>
<div class="form-group">
<div>
Attempt #2
<span class="red">*</span>
</div>
<label class="checkbox-inline">
<input type="checkbox" class="form-control" /> Yes
</label>
</div>
With attempt 1, the "Yes" text is pushed to a separate line. With attempt 2, the checkbox and underlying controls are pulled the width of the page, which also pushes the "Yes" text to the second line. The screenshot of this is below:
Here's what I am trying to do:
The styled checkbox is displayed next to the "Yes"
Selecting the text also selects the checkbox
Keep the solution clean (trying to avoid dealing with float:left or jquery click events on the text to check the checkbox)
It just seems that there has to be a vanilla way to do this. All the bootstrap docs just show standard checkboxes - nothing with the form-control class styling the checkbox for their nice inline examples.
Remove the class="form-control" from your checkboxes. As the bootstrap docs state:
All textual <input>, <textarea>, and <select> elements with
.form-control are set to width: 100%; by default.
jsFiddle example
The .form-control class has about a dozen properties being set that you most likely don't want or need.
Here's what I came up with to fix my issue. I need to retain the .form-control class on the checkbox element so that the checkbox control is styled by the bootstrap theme. My busines requirement is to use the themed, not default browser, checkbox.
See working JSFiddle here: https://jsfiddle.net/vpm13m2b/3/
input[type=checkbox].form-control {
width: 25px;
height: 25px;
display: inline-block;
vertical-align: -8px;
}
The css above was added into my site's stylesheet so that the form-control checkboxes retain the style, and I don't have to change the existing code that has a label containing the checkbox and caption to the right of the checkbox vertically centered.
This works with my original attempt (#1) on the html below:
<div class="form-group">
<div>
Attempt #1
<span class="red">*</span>
</div>
<label>
<input type="checkbox" class="form-control" /> Yes
</label>
</div>
The resulting output matches what I'm looking for in the original question:
http://jsfiddle.net/leongaban/6vwLetd6/13/
I have a custom sign up form with styles from a Codrops demo page.
Basically on hover I want to animate the label text (have it fade in and out) but for now just trying to get the text to change color to red:
.input__label-content--jiro:hover {
color: red !important;
}
<span id="full_name_label" class="input input_jiro">
<input class="input__field input__field--jiro" type="text" id="input-1" />
<label class="input__label input__label--jiro" for="input-1">
<span class="input__label-content input__label-content--jiro">
Full Name
</span>
</label>
</span>
However when you hover over "Full Name" the color doesn't change. Can you see what is blocking the hover effect?
I've removed pointer-events: none declaration and it works.
Take a look at JSFiddle.
So I think You only need to overwrite this one according to auto value => Docs
Is this what You want??
I am trying to show and hide a text field based on whether or not the user clicks a radio button. Is this possible? According to the docs, collapsible content needs a header.
Here is my code with no collapsible content:
<fieldset data-role="controlgroup" data-mini="true">
<input type="radio" name="radio-mini" id="radio-mini-1" value="choice-1" />
<label for="radio-mini-1">No</label>
<input type="radio" name="radio-mini" id="radio-mini-2" value="choice-2" />
<label for="radio-mini-2">Yes</label>
</fieldset>
<label for="textarea-a">Textarea:</label>
<textarea name="textarea" id="textarea-a">
</textarea>
I would like the textarea to be shown if the radio button labeled "Yes" is clicked. Any ideas?
Well, if the radio and the textarea are siblings (and you're using, and happy to be compatible with up-to-date browsers) you could use CSS:
label[for=textarea-a],
#textarea-a {
display: none;
}
#radio-mini-2:checked ~ label[for=textarea-a],
#radio-mini-2:checked ~ #textarea-a {
display: block;
}
JS Fiddle demo.
In the above I removed your radio elements from the fieldset (as the textarea, and its label have to be siblings for this approach to work).
Checkboxes in HTML forms don't have implicit labels with them. Adding an explicit label (some text) next to it doesn't toggle the checkbox.
How do I make a checkbox toggle from clicking on the text label as well?
If you correctly markup your HTML code, there is no need for javascript. The following code will allow the user to click on the label text to tick the checkbox.
<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />
The for attribute on the label element links to the id attribute on the input element and the browser does the rest.
This has been testing to work in:
IE6
IE7
Firefox
Set the CSS display property for the label to be a block element and use that instead of your div - it keeps the semantic meaning of a label while allowing whatever styling you like.
For example:
label {
width: 100px;
height: 100px;
display: block;
background-color: #e0e0ff;
}
<label for="test">
A ticky box! <input type="checkbox" id="test" />
</label>
Ronnie,
If you wanted to enclose the label text and checkbox inside a wrapper element, you could do the following:
<label for="surname">
Surname
<input type="checkbox" name="surname" id="surname" />
</label>
As indicated by #Gatekiller and others, the correct solution is the <label> tag.
Click-in-the-text is nice, but there is another reason to use the <label> tag: accessibility. The tools that visually-impaired people use to access the web need the <label>s to read-out the meaning of checkboxes and radio buttons. Without <label>s, they have to guess based on surrounding text, and they often get it wrong or have to give up.
It is very frustrating to be faced with a form that reads "Please select your shipping method, radio-button1, radio-button2, radio-button3".
Note that web accessibility is a complex topic; <label>s are a necessary step but they are not enough to guarantee accessibility or compliance with government regulations where it applies.
You can wrap your checkbox in the label:
<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
<input type="checkbox" name="surname">
</label>
You need to just wrap the checkbox in label tag just like this
<label style="height: 10px; width: 150px; display: block; ">
[Checkbox Label Here] <input type="checkbox"/>
</label>
FIDDLE
or you can also use the for attribute of label and id of your checkbox like below
<label for="other">Other Details</label>
<input type="checkbox" id="other" />
FIDDLE
this should work:
<script>
function checkbox () {
var check = document.getElementById("myCheck").checked;
var box = document.getElementById("myCheck")
if (check == true) {
box.checked = false;
}
else if (check == false) {
box.checked = true;
}
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>
if it doesnt, pleae corect me!
Wrapping with the label still doesn't allow clicking 'anywhere in the box' - still just on the text!
This does the job for me:
<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>
but unfortunately has lots of javascript that is effectively toggling twice.