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.
Related
I am working on creating a simplified bespoke framework for structuring forms by only adding or removing html elements and without using classes or JavaScript.
After days of work, below is a demonstration of what I manged to do so far:
The only problem I am experiencing is highlighted in yellow circles above.
I simply can't get the input/textarea which is followed by an <i> or <a> to keep its original border-radius, which is set to 4px in this line of CSS:
/*(?) Form elements global border-radius settings*/
input, textarea, select, .select-input, fieldset > div > span,fieldset > div > a {
border-radius: 4px;
}
The full HTML and CSS which used to show the image above can be found in this JSFiddle here: http://jsfiddle.net/kvezedo5 - I have also uploaded a live version of the framework shown in the image above here: http://loai.directory/test
The HTML for the elements in question are below:
<fieldset>
<div>
<input name="">
<i class="icon-question tooltip-top" title="Text Goes Here"></i>
</div>
</fieldset>
<fieldset>
<div>
<input name="">
<a>Button</a>
</div>
</fieldset>
The culprit is this:
fieldset > div > *:first-child:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
You should change that to use a class so it doesn't clobber everything. This is the reason global selectors aren't usually recommended:
fieldset > div > .sharpcorners
I've got an issue that I'd love to solve by using CSS without resorting to statically sizing my labels (but perhaps it isn't possible).
I have two labels per line, one for displaying a "title" and the other for displaying the associated "value". Here's how I'd like it to look:
This is similar to Align labels in form next to input but I'm wanting the second element per line left-aligned instead of the first one to be right-aligned. I tried modifying the accepted answer from that question and set the width of the "title" label, but that has no effect on my output. As I mentioned above, I'd rather not hard-code a width anyways, but I was hoping to get something working before trying to find a good, long-term solution that can account for larger "title" values.
Here's my current CSS (the classes should be self-explanatory):
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
}
.propertyValue {
text-align: left;
}
And my current HTML:
<div>
<div>
<label class="propertyTitle">Hello:</label>
<label class="propertyValue">World</label>
</div>
<div>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyValue">To All of the People in the World</label>
</div>
<div>
<label class="propertyTitle">I Want:</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
The HTML can be modified as well, if that'd make it easier. To conform with best practices, I'd rather not use tables to make this work.
Here's a jsFiddle showing what I have now, what am I missing? Ideally this solution would work for IE8+ and Firefox, so unfortunately HTML5 and CSS3 elements are discouraged.
EDIT
To reiterate after the first two answers came in (that both solve my issue), is there a way to do this without hard-coding a width for my "title" labels?
grouping your divs and labels like so:
<div>
<div class="titleWrap">
<label class="propertyTitle">Hello:</label>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyTitle">I Want:</label>
</div>
<div class="valueWrap">
<label class="propertyValue">World</label>
<label class="propertyValue">To All of the People in the World</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
with the following CSS:
.propertyTitle {
display:block;
text-transform: uppercase;
width: auto;
}
.titleWrap{
display:inline-block;
}
.propertyValue {
display:block;
width:auto;
}
.valueWrap {
display:inline-block;
}
should give you the desired result without having to specify the widths
Check out this jsFiddle
try using display:inline-block on your labels
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
display: inline-block;
}
by default label is an inline element. that's why width property doesn't apply to label.
to apply the width you have to convert the label into a block level element by using display:block.
I hope it clarify the answer.
so you have to use this CSS property in your code.
.propertyTitle {
text-transform: uppercase;
display:inline-block; /*this will make the label a block level element*/
width: 300px;/*Why doesn't this have any effect?*/
}
More modern version is display: inline-flex;
Is there a solution to move each form element on a new line without closing these elements on divs?
I mean:
<label for="one">One:</label> <input type="text" id="one">
<label for="two">Two:</label> <select id="two">
<option value="a">a</option>
<option value="b">b</option>
</select>
...
To display:
One: [.......]
Two: [a \/]
and so on...
If I put on CSS:
input, select, label {
display:block;
}
then labels are not on the same line as the form fields.
Is the only solution:
<div><label for="one">One:</label> <input type="text" id="one"></div>
...
Another way to do it is like this
<label><span>One:</span><input type="text" id="one"></label>
and the css
label {
display:block;
position:relative;
padding-left:120px; /* adjust if necessary */
}
label > span {
position:absolute;
left:0;
}
Why would you use display:block; if you want your elements to behave inline? Taken directly from w3schools.com, "block: displays an element as a block element like <p>".
We all know that when you use <p> the next element is automatically placed on a new line. So if you want your <label> and <input> elements to be side by side, you must use display:inline or inline-block.
Just do
<label for="one">One:</label> <input type="text" id="one"> <br>
Thats it. enjoy
Edit: expanding on what Hardy said, wrapping them in a div or span will give you more
flixibility later down the line but if your only concern is to get it all in one line, just put it like i wrote above.
I have the following code:
<div class="w25">
<span>True</span>
<input data-ng-model="answer.correct"
type="checkbox">
</div>
The div is approximately 150px wide. What happens is that the input appears in the center with about 70px on each side.
How can I get the <input> to go to the left ?
span and input elements are both inline by default, and the checbox will be placed next to the span element. I assume no further styling is applied on any of the elements. If it is, please post your css.
If you want to place the checkbox on the left, you can either:
Turn around the span and input (input first, then the span)
Float the input to the left (style="float: left;")
Use explicit positioning (eg. postition: absolute; left: 0;)
As illustrated here
<input data-ng-model="answer.correct" style="float:left" type="checkbox">
Probably you have inherit styles from your div class="w25". But you can try with this:
One change the order:
<div class="w25">
<input data-ng-model="answer.correct" type="checkbox">
<span>True</span>
</div>
Two add this properties on your CSS to be sure each element has the correct properties:
.w25 input, .w25 span {
margin:0;
padding:0;
vertical-align:middle;
}
View this demo http://jsfiddle.net/W7YE7/1/
First, change the positions of input and span (if you can do it) and see if it works:
<div class="w25">
<input data-ng-model="answer.correct" type="checkbox">
<span>True</span>
</div>
If it doesn't work, try to change the input for:
<input data-ng-model="answer.correct" style="float: left" type="checkbox">
If it doesn't work too, try it:
<div class="w25">
<div style="width:70px; display: inline;"><span>True</span></div>
<div style="float:left; width:70px; display: inline;"><input data-ng-model="answer.correct" type="checkbox"></div>
</div>
You can add the CSS style float: left;
Usually it's a better practice to put the styling in a separate CSS file, not inline, so if you can do that, assign a class to the input, like this:
<div class="w25">
<span>True</span>
<input class="yourclass" data-ng-model="answer.correct" type="checkbox">
</div>
And in the css file:
.yourclass {float: left;}
Here you have the JsFiddle: http://jsfiddle.net/A52nS/
try this css
.w25{
float:left;
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Highlight label if checkbox is checked (html/css)
I would like label to get a red border if radio is checked.
Code so far:
HTML:
<center style="margin-top:20px;">
<label class="big">
This is a box 1
<input name="radio-group1" type="radio" />
</label>
<br/>
<label class="big">
This is a box 2
<input name="radio-group1" type="radio" class='sex' />
</label>
</center>
CSS:
.big {
display:block;
width:100px;
height:100px;
background-color:gainsboro;
cursor:pointer;
}
.big:hover {
border:1px solid blue;
}
No JS solutions please. I have been trying with sibling and children selectors but unsuccesfuly.
JSFIDDLE: http://jsfiddle.net/QqVCu/10/
You would have to rearrange the HTML so the label/red-border-element comes after the radio.
HTML
<center style="margin-top:20px;">
<div class="big">
<input id="box1" name="radio-group1" type="radio" />
<label for="box1">This is a box 1</label>
</div >
<br/>
<div class="big">
<input id="box2" name="radio-group1" type="radio" />
<label for="box2">This is a box 2</label>
</div >
</center>
CSS
.big {
display:block;
width:100px;
height:100px;
background-color:gainsboro;
cursor:pointer;
position: relative;
}
.big:hover {
border:1px solid blue;
}
label {
width: 100%;
height: 100%;
display: block;
}
input[type="radio"] {
position: absolute;
top: 20px;
left: 50%;
}
input[type="radio"]:checked + label {
border: red 1px solid;
}
http://jsfiddle.net/QqVCu/12/
But it starts getting weird. A little javascript wouldn't hurt.
edit: this version is a little cleaner
You can use :checked selector, but this will only work for the checkbox itself. Otherwise there is no way to do it in pure CSS - you will have to resort to JavaScript (which I do realize you said you wanted to avoid - but pure CSS won't do it).
What you are trying is not possible with current structure of your html. There is no such thing as a parent selector. There is a sibling selector though, wich could be used to accomplish what you are after. First you would have to restructure your html to something like this:
<div>
<input name="radio-group1" id="box1" type="radio" />
<label class="big" for="box1">
This is a box 1</label>
</div>
<div >
<input name="radio-group1" id="box2" type="radio" class='sex' />
<label class="big" for="box2" >
This is a box 2</label>
</div>
I made label and input siblings in stead of parent/child. They will still work the same thanks to their id and for attributes. I also changed their order to be able to use the next sibling selector. The extra div is required to do some absolute positioning to put them back in the same order you had in your fiddle.
Next i added a few lines of css. The real magic happens here:
div input:checked+label {
border: 1px solid red;
}
This will selected all 'next sibling' of an input that is checked and has a div as a parent. You could further finetune this to only work on radio's and in reality i would add a class to the wrapper div, but this is just a 'proof of concept'.
The rest of the css i added is just some positioning to mimic the layout you had in your example. This will also need some finetuning.
The working example is here: http://jsfiddle.net/QqVCu/14/