Can anyone please tell me how to make radio buttons appear closer to each other? (they currentl both appear far from each other)
Please check this link,
I tried using 'padding-left' as below, but this did not fix my issue. Could anyone please tell me what actually went wrong?
I tried:
.gform_wrapper .left_label ul.gfield_checkbox,
.gform_wrapper .right_label ul.gfield_checkbox,
.gform_wrapper .left_label ul.gfield_radio,
.gform_wrapper .right_label ul.gfield_radio {
margin-left: 32%;
overflow: hidden;
padding-left: 20px;
}
#main-content .gform_wrapper label {
width: 200px;
}
This rule is being applied to your radio button labels, that's why you have such a large space between items.
Try this this may reduce the space between radio buttons.
.ginput_container ul li label{width:120px;}
You need to change the width of the labels for "male", "female", etc. I would add a class for those labels so they don't get the 200px width you have from the other rule. In theory,
<li class="gchoice_6_0">
<input name="input_6" type="radio" value="Male" id="choice_6_0" tabindex="4" onclick="gf_apply_rules(3,[0]);">
<label for="choice_6_0" class="radioLabel">Male</label>
</li>
Then add the following rule to your css
#main-content .gform_wrapper label.radioLabel {
width:30px; //Adjust this width for the result you want.
}
Let's say you're going to have 2 lines, in each line there's 2 radio buttons, just like that link you provided.
First Line
<div class="radioDiv">
<input type="radio" name="group1" class="leftRadio" value="male"/>
<input type="radio" name="group1" class="rightRadio" value="female"/>
</div>
Second Line
<div class="radioDiv">
<input type="radio" name="group2" class="leftRadio" value="single"/>
<input type="radio" name="group2" class="rightRadio" value="married"/>
</div>
CSS
.radioDiv
{
width:200px;
}
.leftRadio
{
float:left;
}
.rightRadio
{
float:right;
}
You have several, contradictory rules in your various CSS files.
For instance, this says
.wpcf7-form label, #main-content .gform_wrapper label {
float: left;
width: 70px;
}
while this says
#main-content .gform_wrapper label { width: 200px; }
The latter happens to override the former, but only because you include the second file later.
So you can either remove the line in the second one, or change the order in which the CSS files are included.
Use this:
<label for="choice_6_0" style="width: 50px;">Male</label>
And add the width for all labels like male etc
Related
I am trying to move my radio buttons by using positioning but it doesn't seem to work. I have added an id for each radio option and trying to style it that way. The whole thing is in a class called ticket…
I have added an id to the input but it doesn't work:
echo '<tr><th>Has this been Resolved?</th><td><input type="radio" name="resolve" value="Yes" id="yes">Yes<input type="radio" name="resolve" value="No" id="no">No</td></tr>
<tr><th></th><td><textarea name="reply"></textarea></tr></td>
<tr><th>Add Reply/Message</th><td><input type="submit" name="submit" value="Reply"></tr></td>
This is my CSS:
.ticket input[type="radio"] {
position: relative;
right: 55em;
}
First, your HTML is a bit messed up. Second, don't use tables to position elements. Tables are for tables full of data -- at least, since about 1998 or so. Use div and span elements.
The way to easily position elements specifically requires three steps:
Put the elements inside a div.
Set the div's position to relative.
Set all of the elements' position to absolute.
I've put an example together here.
You'll notice that I put your radio buttons inside a span element, and targeted those with the CSS. This allows the captions to be positioned along with the radio buttons; you position the span instead of the input element. If you target the input element, the captions won't be affected and will stay in their default positions.
Also, I just used first-child and last-child as selectors. You could assign each one an id if you want to, but I thought I would show you this as well.
Now, you position the buttons by changing the left and top values of the span elements that contain them.
#theRadios {
height: 100px;
position: relative;
}
#theRadios span {
position: absolute;
}
#theRadios span:first-child {
top: 10px;
left: 0;
}
#theRadios span:last-child {
top: 40px;
left: 0:
}
<div id="theHeader">Has this been Resolved?</div>
<div id="theRadios">
<span><input type="radio" name="resolve" value="Yes" id="yes">Yes</span>
<span><input type="radio" name="resolve" value="No" id="no">No</span>
</div>
<div>
<textarea rows=4 cols=50 placeholder="Add Reply/Message"></textarea>
</div>
<div>
<input type="submit" name="submit" value="Reply">
</div>
Hiding elements by offsetting the element beyond visible space is prone to errors and haphazard for someone else who looks at the code.
Nevertheless, you can fix it with other ways such as
Use display: none.
Use visibility: hidden.
Use opacity: 0.
Position it off the screen using position: absolute and an insanely big value
like left: -9999px.
I am looking to try something like in the below link, however I want different images for each checkbox. Is there any way to do this? I have tried setting different classes for each item and just adding the class to the checkbox, but that doesnt seem to work...the default checkboxes just remain the same.
MY ATTEMPT:
https://jsfiddle.net/9qjj7012/
<div class="AccordionPanel" id="acc-step-3">
<div class="AccordionPanelTab">Step Three - Equipment Package</div>
<div class="AccordionPanelContent">
<div class="">
<input type="checkbox" name="equipment" value="speakers" id="equipment_0" class="speaker">
<input type="checkbox" name="equipment" value="subwoofer" id="equipment_1" class="subwoofer">
<input type="checkbox" name="equipment" value="smoke-machine" id="equipment_2" class="smokemachine">
<input type="checkbox" name="equipment" value="moving-head" id="equipment_3" class="movinghead">
</div>
<div class="form-gap"></div>
<input name="previous" id="acc-step-prev-3" type="button" class="form-btn form-prev" value="Previous">
<input name="next" id="acc-step-next-3" type="button" class="form-btn form-next" value="Next"><br>
<input name="reset" type="reset" class="form-btn form-reset" value="Reset">
</div>
</div>
EXAMPLE OF THE RESULT I WOULD LIKE:
http://codepen.io/jointmedias/pen/HqCJe (Except with individual images for each checkbox)
NEW JSFIDDLE: https://jsfiddle.net/9qjj7012/
What you're doing wrong, is that you're assigning a class to the checkbox, while the CSS rules in the example you refer to don't select the check box, they select the label. The checkbox is actually hidden, it's the label you are seeing.
Check this out:
http://codepen.io/DavidvanDriessche/pen/xVwJgd
In this example the labels have different classes and the css rules act upon that as follows:
For all checkboxes:
input[type=checkbox] {
display: none;
}
For all labels with class background1 that are following a checkbox:
input[type=checkbox] + label.background1 {
background: url("http://www.corporatecomplianceinsights.com/wp-content/uploads/2013/06/Facebook-thumbs-up.jpg") no-repeat;
}
For all labels with class background2 that are following a checkbox
input[type=checkbox] + label.background2 {
background: url("http://www.clker.com/cliparts/e/2/a/d/1206574733930851359Ryan_Taylor_Green_Tick.svg.med.png") no-repeat;
}
For all labels with a class attribute that begins with "background" and are following a checkbox:
input[type=checkbox] + label[class*="background"] {
background-size: 50%;
height: 250px;
width: 250px;
display: inline-block;
padding: 0 0 0 0px;
}
The only reason I'm working with that last rule is that it allows you to put all common formatting code into one CSS rule and you don't have to repeat it for each of the rules that target a specific background class, but that's a nicety you could forego if you want.
So far checkbox does not support background attribute. Luckily checkbox label also work as a clickable area for the assigned (for=checkboxId) checkbox. So the idea is to make a fake checkbox using label element and then change it's background value when checked.
input { display:none; } /* hide the checkbox. Label is our clickable area */
label { /* define the clickable area */
height: 150px;
width: 150px;
display: inline-block;
border: 2px solid;
}
/* set background image of the clicked area */
input[id=speakers]:checked + label {background: url('speakers.jpg');}
input[id=subwoofer]:checked + label {background: url('subwoofer.jpg');}
input[id=smoke-machine]:checked + label {background: url('smachine.jpg');
}
See Demo
I got this, but I do not want the yellow outline. How can I do?
My code:
<div class="ui-block-a">
<div class="ui-bar ui-bar-e" style="height:50px">
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1"></label>
</div>
You need to override checkbox style in three steps.
Position of checkbox itself, which lays behind the visual checkbox. I have added div.-ui-bar before each overridden style in order not to specific and to keep original styles elsewhere.
Demo
div.ui-bar input {
left: 10px !important
}
Width of label
div.ui-bar label {
width: 27px !important
}
Position of visual checkbox
div.ui-bar .ui-checkbox .ui-btn-icon-left .ui-icon {
left: 5px !important
}
On my website, users can post articles and tag them accordingly using some pre-set tags. These tags are in the form of checkboxes. Example below:
<input type="checkbox" name="wpuf_post_tags[]" class="new-post-tags" value="Aliens" /> Aliens
<input type="checkbox" name="wpuf_post_tags[]" class="new-post-tags" value="Ghosts" /> Ghosts
<input type="checkbox" name="wpuf_post_tags[]" class="new-post-tags" value="Monsters" /> Monsters
As you might know, the checkboxes will look something like this:
[ ] Aliens
[o] Ghosts
[ ] Monsters
I would like to do is have the checkbox being one large button with the value inside of it. And then make it have a "toggle" effect.
[ Aliens ] [ Ghosts ] [ Monsters ]
How would I go about doing this?
Check this out
HTML
<input id="chk_aliens" type="checkbox" name="wpuf_post_tags[]" class="vis-hidden new-post-tags" value="Aliens" />
<label for="chk_aliens">Aliens</label>
<input id="chk_ghosts" type="checkbox" name="wpuf_post_tags[]" class="vis-hidden new-post-tags" value="Ghosts" />
<label for="chk_ghosts">Ghosts</label>
<input id="chk_monsters" type="checkbox" name="wpuf_post_tags[]" class="vis-hidden new-post-tags" value="Monsters" />
<label for="chk_monsters">Monsters</label>
CSS
.vis-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
label {
margin: 10px;
padding: 5px;
border: 1px solid gray;
}
input:focus + label {
border-color: blue;
}
input:checked + label {
border-color: red;
}
input:focus:checked + label {
border-color: green;
}
Note that the last selector may not work in older IE.
This can be done using checkboxes and labels, the adjacent sibling selector – and the CSS3 :selected pseudo class.
HTML:
<span><input type="checkbox" id="c1"><label for="c1">[ Aliens ]</label></span>
<span><input type="checkbox" id="c2"><label for="c2">[ Ghosts ]</label></span>
<span><input type="checkbox" id="c3"><label for="c3">[ Monsters ]</label></span>
CSS:
input { display:none; }
input:checked ~ label { color:red; }
http://jsfiddle.net/drTg2/
But be aware that this will easily fail in older browsers – because they don’t know ~ or :checked. And older IE have problems with checkboxes set to display:none – won’t transfer them when the form is submitted (although that can be overcome by other means of hiding, f.e. absolute positioning of the screen).
If you don’t insist on a pure HTML/CSS solution – there are many scripts / {js-framework-of-your-choice}-plugins out there, that help achieve the same effect.
Checkboxes, radio buttons and SELECT elements have very limited styling capabilities and they vary widely across browsers.
You're better off accomplishing these using styled links or buttons, then using JavaScript to set the actual on/off appearance and form values.
You can borrow ideas from this page! Try to bind your text and checkbox. And then then try to use jquery to "toggle" the label associated to the checkbox.
You can then use styles and images to make the labels look like containers for checkboxes. That is what I would do.
You may try to have pictures with javascript onclick event that would change img source attribute. Then, put hidden control with given id and in the same onclick event use document.getElementById('hiddencontrol').value = 1 - document.getElementById('hiddencontrol').value (with 0 or 1 as default).
However, I don't know how to make it without Javascript.
I make a small chat. There was a problem with CSS, because I'm more a programmer than a layout designer.
HTML:
<div class="chat_input_box">
<input type="text" class="chat_input_text" name="message">
<input type="submit" value="Отправить" class="chat_submit_button">
</div>
CSS:
.chat_input_box {
width: 100%;
}
.chat_input_text {
width: 83%;
}
.chat_submit_button {
margin-right: 0px;
}
The problem is that it is not goes to set the width of the text field maximum without hardcode (83% for example).
try to put button and input filed into two different divs. Give button div CSS parameter "float: right; width: someAmount px;"
Not really what you asked for, but as close as possible: http://jsfiddle.net/TQvg8/