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
}
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.
Is there anyway to target specific input text elements in a form and reposition it, because it's letting me do things such as adjust padding, but I cannot reposition it by using margin. I also can't change the color, unless I do a style on the label. But doing a color on the label is useless because there's still the color in the input that I want to change. In short, I don't know how to override the original rule that I have for my input elements. Margins are not working either.
code:
input[type=text] {
width: 75%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block border: 1px solid #ccc;
border-radius: 4px;
color: #ffb3ec;
font-size: 24px;
box-sizing: border-box;
background-color: #4d4100;
}
.sample {
width: 30px;
background-color;
green;
}
<div class="mainBox">
<form>
<fieldset>
<label>placeholder:
<input type="text" id="placeholder" name="placeholder">
</label>
<br>
<label>Targets
<input type="text" class="sample" name="sample">
</label>
</fieldset>
</form>
</div>
You can wrap your input into a div element like below and reposition that:
<div class = "mainBox" >
<form>
<fieldset>
<div class = "wrapper">
<label> placeholder: </label>
<input type = "text" id = "placeholder" name = "placeholder" >
</div>
<br>
<div class = "wrapper">
<label> Targets </label>
<input type = "text" class = "sample" name = "sample" >
</div>
</fieldset>
</form>
</div>
I have rearranged the code a bit to fix the colour problem. It occurred, because you wrapped your input element inside the label. It doesn't work this way. Also remember to use for = "[THE ID OF YOUR INPUT ELEMENT]" to bind them together like so:
<label for = "sample"> Targets </label>
<input id = "sample" type = "text" class = "sample" name = "sample" >
In addition, before trying to play with top, bottom, left, right, paddings and margins always define the position of the element, because the default position is set to static, which means it isn't supposed to be moved.
position: static /* default, not supposed to be moved */
position: relative; /* to have move around its relative area */
position: absolute; /* to have move around based on the parent element */
position: fixed; /* to have move around based on the body of the document */
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 have a search button on the page, and when users press the search button, the search bar comes into the screen and I would also like to set the input to focus as well. Can I do this with pure CSS3?
Here is the code:
<input type="checkbox" id="Search_Button" /> <!-- Opens Search Bar -->
<label for="Search_Button">
<div id="Search_Container" class="Button_Container">
<img src="SVG/Search.svg" class="Button" id="Search" />
</div>
</label>
Here you can see the CSS styling so that the search bar is pushed off the screen:
#Search_Box {
position: absolute;
width: 100vw;
height: 8vh;
background-color: #38D1A9;
transform: translate3d(0, -8vh, 0);
transition: transform .2s ease-out;
}
Here is the search box that drops down:
<div id="Search_Box">
<input type="search" name="Search" id="Search_Input" placeholder="Search" />
</div>
So here is the issue. I have a search icon displayed. When the search icon is pressed, it brings down the "Search_Box" which has the search input inside it. I would like to, when that search icon is pressed, immediately make that search box focused.
The issue with a label technique is that, while it works exactly as intended, the search icon is already inside a label (this label it sits inside is to bring down the search box into view), so I won't be able to wrap it in another label.
I tried to do this:
#Search_Button:checked ~ div #Search_Input {
cursor: pointer;
}
I tried saying that when the Search_Button was checked, it would bring the search input to focus, but it's definitely not the way to do it. I'm trying to avoid using JS if I can because I'm working on mobile.
I really apologize for any confusion!
You can achieve this with native HTML behavior by associating a label element with the input element. Set the label element's for attribute equal to the input element id attribute value. When the label element is clicked, the input element will be focused on.
Example without JavaScript:
label {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
padding: 1px 6px;
}
<label for="focus-input">Button</label>
<p>Other elements...</p>
<input type="text" id="focus-input" />
It's worth mentioning that the CSS above isn't required. It was only added to make the label element appear at a button. Feel free to style the label element however you want. In certain cases, you can even wrap it around other elements.
Alternative example with different styling:
label {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
<label for="focus-input">Button</label>
<p>Other elements...</p>
<input type="text" id="focus-input" />
Alternative example with JavaScript:
document.querySelector('button').addEventListener('click', function () {
document.getElementById('focus-input').focus();
});
<button>Button</button>
<p>Other elements...</p>
<input type="text" id="focus-input" />
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