Here is the code:
input:not(#radioo input){
display: block;
font-size:23px;
border-radius: 10px;
width:310px;
height: 40px
}
but all input are excluded! and I want only to exclude input that is in the form that has the ID radioo
:not only takes simple selectors the best solution would be to give each input you want to exclude a class and use :not(.theclass)
From the comments it seems there is a solution without adding a class
form:not(#radioo) input{
display: block;
font-size:23px;
border-radius: 10px;
width:310px;
height: 40px
}
The following selector seems to do what you want. Only the input in the second form will have an orange background.
http://jsfiddle.net/pYhgr/
form:not(#radioo) input {
background: orange;
}
<form id="radioo">
<input type="text" />
</form>
<form>
<input type="text" />
</form>
Related
Edit: apparently cant use <> braces or it hides names?...
I've seen a few variations of this question asked, however none of what I found fits my particular issue, which I think is a simple issue. I am creating the following radio button group in react:
const myOptions = ["YTD", "Week", "Month", "Pre AS", "Post AS"]
const myButtons =
<form>
<div className="radio-group">
{myOptions.map((d, i) => {
return (
<label>
<input
type={"radio"}
value={myOptions[i]}
checked={timeframeNew === myOptions[i]}
onChange={this.handleTimeframeNewChange}
/>
<span>{myOptions[i]}</span>
</label>
)
})}
</div>
</form>;
and here is my current CSS for styling the buttons to look nice...
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: #333;
background: #EEE;
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
border: 2px solid orange;
}
input[type=radio]:checked + label {
color: red;
background: #333;
}
label + input[type=radio] + label {
border-left: solid 2px blue;
}
.radio-group {
border: solid 2px green;
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
}
Unfortunately, the CSS is not working as intended. In particular, the following selection - input[type=radio]:checked + label does not work because there is no label immediately after an input. The only way so far I have been able to successfully get my react onChange handler function to work is by putting the input inside of the label, like this, and then returning the label in each .map loop.
*Since the return needs to be a single element, if I want to take the out of the label, I would need to then include them both in a div or a span, and for some reason doing so breaks my onChange handler...
So my question is, how how how can I, in CSS, grab the label that corresponds to the clicked input. I would like to change the entire label's color and background when it is / isn't clicked, so selecting the span does not help (since that only changes the texts color/background, not the whole label.
Thanks in advance!!
CSS can select child and sibling elements, but not parent elements. I often hide default radio buttons and checkboxes and create my own, like this:
.button-group{
font-size:0; /*Prevents a space from occuring between buttons*/
}
.button-group input{
position:absolute;
visibility:hidden; /* display:none causes some browsers to ignore the input altogether */
}
.button-group input+span{
display:inline-block;
line-height:20px;
font-size:1rem;
vertical-align:top;
padding:0 10px;
color:#000;
border-left:1px solid #a00;
}
.button-group label:first-child input+span{
border-radius:10px 0 0 10px;
border-left:0;
}
.button-group label:last-child input+span{
border-radius:0 10px 10px 0;
}
.button-group input:not(:checked)+span{
background-color:#faa;
}
.button-group input:not(:checked)+span:hover{
background-color:#f66;
}
input[type=radio]:checked+span{
background-color:#f33;
}
<div class="button-group">
<label>
<input type="radio" value="1" name="myfield" />
<span>Option 1</span>
</label>
<label>
<input type="radio" value="2" name="myfield" />
<span>Option 2</span>
</label>
<label>
<input type="radio" value="3" name="myfield" />
<span>Option 3</span>
</label>
</div>
*Since the return needs to be a single element, if I want to take the out of the label, I would need to then include them both in a div or a span, and for some reason doing so breaks my onChange handler...
You can use <React.Fragment> <input /> <span /> </ReactFragment> to return multiple elements without rendering them inside a div or span
I'm looking to make inputs like this with choices low/medium/high and have arrow controls similar to input[type=number]. What's a semantic way to code this?
If you want to be semantic and accessible; But also keep this design;
Your best choice is to use input[type=radio] and label[for].
You'll have to use :checked pseudo-attribute and ~ adjacent selectors.
Here is a working snippet, I didn't spent time on design.
.almost-select {
display: inline-block;
background: #EEE;
border: #CCC solid;
border-radius: .2rem;
}
.almost-select input,
.almost-select output{
display: none;
}
.almost-select .buttons {
display: inline-block;
border-left: inherit;
}
.almost-select label {
font-size: .5em;
}
.almost-select #temp_high:checked ~ output[for='temp_high'] {
display: inline-block;
}
.almost-select #temp_low:checked ~ output[for='temp_low'] {
display: inline-block;
}
<div class='almost-select'>
<input type='radio' name='temp' id='temp_high' checked />
<input type='radio' name='temp' id='temp_low' />
<output for='temp_high'>High</output>
<output for='temp_low'>Low</output>
<div class='buttons'>
<label for='temp_high'>▲</label>
<label for='temp_low'>▼</label>
</div>
</div>
But how many options do you have ?
If you have a select with many many options, it will result in a really big CSS...
I have a problem with my web form fields not lining up properly.
see screenshot: http://awesomescreenshot.com/00cw0c80e
The label is longer than normal BUT I need it to be that long. If I shorten the label, it lines up find as expected.
Anyone can help?
Thanks! :)
ps. I've looked at various samples in the net but no go.
my css
input.issu {
margin-bottom: 8px;
width: 220px;
}
label.issu {
display: block;
float: left;
margin-bottom: 8px;
padding-left: 10px;
padding-right: 10px;
width: 270px;
text-align: left;
vertical-align: top;
}
select.issu {
margin-bottom: 8px;
width: 240px;
}
br.issu {
float: clear;
}
my html code (I've tried with and without div tags)
<div>
<label for="departingFrom" class="issu">Direct flight into Singapore from (please name city)<span class="red">* required</span></label>
<input id="departingFrom" name="departingFrom" class="issu" value="" type="text">
<br class="issu">
</div>
<div>
<label for="additionalInfo" class="issu">Additional info(e.g. accompanying family members)<span class="red">* required</span></label>
<input id="additionalInfo" name="additionalInfo" class="issu" value="" type="text">
<br class="issu">
</div>
add overflow:hidden property to container div of label and input as follow. It will work fine.
css:
div{
overflow:hidden
}
Use a table, putting the labels in one column, input fields in another. Then set vertical-align on the cells as desires (there are different interpretations on what “lining up” means in a case like this).
Is there any way to have a label respond to focus. I have some code where the textfield has a different style on focus. The label also however needs a slightly different style. I tried this but it did not effect the label.
#header .search label {
background:url(http://www.golfbrowser.com/images/icons/search.png) left top no-repeat;
padding-left:20px;
height:20px;
float:right;
}
#header .search label:focus {
background:url(http://www.golfbrowser.com/images/icons/search-z.png) left top no-repeat;
padding-left:20px;
height:20px;
float:right;
}
#header .search input {
padding:0px;
border:0px;
width:140px;
height:20px;
float:left;
padding-right:10px;
background:url(http://www.golfbrowser.com/images/icons/searchbar.png) right top no-repeat;
}
#header .search input:focus {
padding:0px;
width:190px;
height:20px;
float:left;
padding-right:10px;
background:url(http://www.golfbrowser.com/images/icons/searchbar-z.png) right top no-repeat;
}
The label contains an image and the other part of a round corner and it too must change colour in order for the field to look correct.
Any ideas,
Marvellous
You can't actually give focus to a label. It's not a focusable form element. Besides, even if you could do that, then whatever previously had focus (that means your input) would lose it to the label anyway.
You may have to restructure your HTML (and modify your CSS accordingly) so that you can select input:focus and then that input's corresponding label. For instance, if you moved your label after your input and used the following CSS selector for your label, you should be able to accomplish what you want.
#header .search input:focus + label
BoltClock's answer is the more semantic, lightweight way of achieving this functionality. However it's not always possible to have a specific HTML structure (especially to facilitate a minor feature like this) and CSS lacks the ability to traverse up the HTML hierarchy. To get around that, here are two alternatives. The first is coming soon (CSS spec 4) and the second is our old mate Javascript.
First up, CSS4's :focus-within pseudo selector. This does exactly what it says on the tin (scopes based on any child element's active focus state). Read more about the spec here. So assuming you have a HTML structure of:
<div class="input-wrapper">
<label for="elem">Label Text
<input name="elem" id="elem" type="text" />
</label>
</div>
you could scope the 'focussed' label by simply:
label:focus-within{}
by the same token, you could also scope the parent div with:
div.input-wrapper:focus-within{}
Magical. But not for use today :(
Second up, if you're already using a JS selector engine (i.e. jQuery, Sizzle, etc.), you could also do something along the lines of:
$('input').on("focus", function(){
var input = $(this);
// assuming label is the parent, i.e. <label><input /></label>
var label = $(this).parent();
label.addClass('focussed');
input.on("blur", function(){
label.removeClass('focussed');
input.off("blur");
});
});
This is untested but the essence of what this achieves is using a class rather than the :focus pseudo selector. So you can add your focussed styles to label.focussed{}. I've added (and self-removed) the blur handler to facilitate removing the class.
Now using Flex box will solve this. Have the label element follow the input element in the HTML. Then use flex-direction: column-reverse to change its position to appear above the input element. You can then use the input:focus + label: {} to target the label.
.input-container {
display: flex;
flex-direction: column-reverse;
}
.input-container > input {
/* your input styles */
}
.input-container > input:focus + label {
/* targets the label when the input receives focus */
color: red;
}
<div class="input-container">
<input type='email' />
<label>Email</label>
</div>
use:checked instead of :focus and you must give id,name,value into 'input'.
Found a good solution - order property made a trick:
input:focus {
background-color: #F2FFF0;
}
* {
font-family: "Arial";
font-size: 13px;
}
div.settings {
display:grid;
grid-template-columns: max-content max-content;
grid-gap: 7px
}
div.settings label {
text-align:right;
padding-top: 3px
}
div.settings label:after {
content: ":";
}
div.settings input:focus + label:before {
content: "\25B6 ";
font-size: 12px;
color: red;
}
input {
border: 1px solid #ccc;
padding: 2px 4px;
font-size: 13px;
}
<div class="settings">
<input style="order:2" type="text" title="(vardas, pavardė ir pan.)" autocomplete="off" id="name" name="name" required minlength="4" maxlength="128" size="50"><label style="order:1" for="name">Pirkėjas</label>
<input style="order:4" type="text" title="" autocomplete="off" id="company" name="company" required minlength="4" maxlength="128"><label style="order:3" for="company">Įmonės pavadinimas</label>
<input style="order:6" type="text" title="" autocomplete="off" id="companyCode" name="companyCode" required minlength="4" maxlength="128"><label style="order:5; min-width: 160px" for="companyCode">Įmonės (asmens) kodas</label>
</div>
I am trying to create tableless Form using and tags, im stuck.
I want the form look like this:
I should be able to set the width of textbox, text area and select in CSS.
Make each row a <p> containing a <label> and an <input>, both display: inline-block with preset width. (The <label> should be text-align: right)
The buttons can be float: right.
This is a good walk through: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
check out working example here:
http://jsfiddle.net/bRm3P/2/
<form>
<label>To: <input type="text" /></label>
<label>Subject: <input type="text" /></label>
<label>Message: <textarea></textarea></label>
<div class="submit-container">
<input type="submit" value="submit"/><input type="submit" value="submit"/>
</div>
</form>
<style>
form {
width: 500px;
}
label {
display: block;
text-align: right;
margin-bottom: 4px;
}
label input,label textarea {
border: 1px solid #DEDEDE;
width: 80%;
vertical-align: top;
}
.submit-container {
padding-top: 4px;
text-align: right;
}
</style>
A nice semantic layout would be one of the following:
<ul>
<li><label>To <input></label></li>
...
</ul>
Or with a dl (more common):
<dl>
<dt><label>To</label></dt><dd><input></dd>
...
</dl>
You will find lots of ways to layout the latter if you google for: definition list layout form