I think this is a pretty simple thing to do, but I don't know how.. thus I'm here. I have written a simple HTML form and need to change the color of the text on a Radio Button. Anyone have any ideas on how this is done?
<input type="radio" id="foo">
<label for="foo"> Blah Blah </label>
Now you select the LABEL via CSS and set it to have a color... You can use classes or relationship, for example:
.radioDiv label { color:blue; }
Assuming the following HTML:
<input type="radio" name="group1" value="Milk" /><span>Milk</span>
Just either add a class to the span, or wrap it in a div and style that using basic CSS:
#somediv span
{
color: red;
}
Related
I have a containing div that has three divs inside. I want to style only the two divs that contain the radio input. Without using class names, is it possible to select those two divs?
If not, how do I select just the radio inputs and style those? Here's my attempt, with non-working CSS:
.container > div > input[type="radio"] {
border:1px solid green;
}
<div class="container">
<div>
<input type="radio" id="22" name="SetFour">
<label for="22"><span>Selection One</span></label>
</div>
<div>Some Random Div</div>
<div>
<input type="radio" id="23" name="SetFour">
<label for="23"><span>Selection Two</span></label>
</div>
</div>
CodePen for reference
You can use nth-of-type. But do this only if you have no alternatives and are sure that this block will not change in the future.
.container > div:nth-of-type(1),
.container > div:nth-of-type(3) {
border:1px solid green;
}
The selector selects the radio buttons, but the radio inputs don’t support the border property.
In case you want to select the divs, not the inputs, use classes; although there is a :has() pseudo‐class in the specifications, no major browser currently supports it.
https://caniuse.com/css-has
https://www.w3.org/TR/selectors-4/#relational
you have to set them a class.
write the similar class and styling.
or their id.
I can't get my checkboxes and labels on the same line. The proper bootstrap way is to wrap the checkbox in the label tag like this-
<li>
<label><input type="radio">Joe made the sugar cookies; Susan decorated them.</label>
</li>
But I'm using a CMS and it does not create checkboxes and labels that way, instead they are generated like this-
<li>
<input type="radio">
<label>She did her best to help him.</label>
</li>
The problem with this method is the checkboxes are on a different line to the label. I can set the label to display: inline and this works, but it removes all margins from my form and does not look very nice.
Can anyone help me to find a solution? Here is a js fiddle
You need a little more work in the css... Just created a new fiddle for you.
Here it is.
li > input {
display:inline-block;
width:20px;
}
label { margin-bottom: 25px;
display:inline-block;
width:235px;
}
Use Bootstraps's radio-inline class:
See updated fiddle: https://jsfiddle.net/xs04fqgo/1/
Wrap the content and radio input within a label with class radio-inline, then you can make it on the same line using Bootstrap
Try using bootstrap "checkbox" or "checkbox-inline" class
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
Reference:
https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp
I am using jquery form validation and I need to apply color code for all the textboxes in the form without specifying each textbox id in the Css. Instead How to apply css for all the text box in the form using the form id. Please let me know is there any solutions.Thanks in advance.
#formID input[type="text"]{
Put your css here
}
in css, you can do this:
form input {
// Your formatting comes here..
}
or if you want this to apply for a specific form having an id="myForm":
#myForm input {
// formatting comes here for example: color:red;
}
The background knowledge for this is CSS Selectors.
If by textboxes you mean <input type="text"> and <textarea> elements, you can simply style them using the following:
#formid input[type=text],
#formid textarea {
/* CSS rules */
}
Note that <input> elements with types other than text exist. Read more about those here.
Try this...
#frm1>input[type="text"]{
border:1px solid red;
width:100px;
margin:1%;
}
<form id="frm1">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</form>
You can use the .children() function of the jQuery api to set the css properties of the form elements.
eg : jsFiddle
$('#FormID').children().css("property", "value");
((I'm a beginner so this probably has a simple solution, but I've searched with all the keywords I can think of and can't find what I'm looking for. I appreciate any help — clearly I am in over my head.))
I'm trying to give the first radio button within a paragraph a different margin than the rest of the radio buttons. This is what I have:
p.question:first-child input[type=radio] {
margin: 5px;
}
<p class="question">
<input type="radio" name="sample1" /> Yes
<input type="radio" name="sample1" /> No
<input type="radio" name="sample1" /> Maybe-So
</p>
Shouldn't this target the first radio button within a paragraph? Please be gentle.
You're putting the first-child on the <p>, not the radio button.
Try this.
p.question input[type=radio]:first-child {
margin: 5px;
}
Here's a jsfiddle.
I am trying to use "check box" to change color of element.
HTML:
<label for="toggle-1">I'm a toggle</label>
<input type="checkbox" id="toggle-1">
<div class="reklama">I'm controlled by toggle. No JavaScript!</div>
CSS:
.reklama {
color:Red;
}
input#toggle-1: checked ~ .reklama{
color:green;
}
U can find my demo here.
You can't have any spaces before the ":checked", so that it is directly connected to your id. This will work in your CSS
input#toggle-1:checked ~ .reklama{