My question is similar to this one: CSS to select another Element based on a HTML Select Option Value
Here's my HTML:
<select id="select-card">
<option value=""></option>
<option value="card">**** **** **** 1982</>
</select>
<p>Or enter a new one...</p>
I want to hide the <p> when the user selects a card from the list, and show it when the user selects the empty option.
Is this possible in pure CSS, or do I need to use JavaScript?
Use the required attribute:
<select id="select-card" required>
And write rules for valid and invalid for the element, selecting the following p-element:
#select-card:invalid + p { display: block; }
#select-card:valid + p { display: none; }
Fiddle
Related
I've been trying to figure out the way to hide every 'label' element in the html below except the first one. I've got a repeater field that adds a row with a dropdown select field and a label.
Each new row adds the select field and the label. The label id starts with 'label-repeat- ' and the suffix is dynamically generated based on the number of repeater rows, so it goes: 'label-repeat-1', 'label-repeat-2', 'label-repeat-3' etc.
The issue is that each repeater row is separately wrapped into its own div, so I'm guessing I cannot use :not(:first-child) in the case.
Here is my fiddle and below is my html:
<div class="fieldset">
<div class="status">
<label id="label-repeat-1" class="label-repeater">Status</label>
<select id="field-repeat-1" class="field-repeater">
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
</div>
</div>
<div class="fieldset">
<div class="status">
<label id="label-repeat-2" class="label-repeater">Status</label>
<select id="field-repeat-2" class="field-repeater">
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
</div>
</div>
<div class="fieldset">
<div class="status">
<label id="label-repeat-3" class="label-repeater">Status</label>
<select id="field-repeat-3" class="field-repeater">
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
</div>
</div>
I've been trying to use the wildcard selector to select the label with label[id^='label-repeat-'], label[id*=' label-repeat-'] which works fine, but then I'm trying to add the :nth-of-type(n+2) pseudo class to select every label except the first one and hide it, but that doesn't seem to work.
label[id^='label-repeat-']:nth-of-type(n+2),
label[id*=' label-repeat-']:nth-of-type(n+2) {
display: none !important;
}
Is there any other way to do this with CSS? Or even jQuery?
If I understand, you want to hide all except for the first label. So, you would end up with a label and 3 select boxes under it? Using the "plus" combinator in CSS is the easiest way of saying "all but the first one"...
.fieldset + .fieldset label {
display:none;
}
This rule is saying any fieldset that is followed by another fieldset (all but the first one), then the nested label under those.
I'm trying to set the hover background color of the options inside select tag.
It seems that it has been difficult to do this, but is there any up to date way to do this?
I'm using mobx+react in my application
HTML:
return(
<select
className="selectDecoration"
name={ name }
value={ value }
onChange={ e => onChange( name, e.target.value) }
>
<option disabled hidden value={ name } >
<a>{ name }</a>
</option>
{ options.map( item =>
<option value={ item }>
<a>{ item }</a>
</option> )
}
</select>
);
It is impossible to inject CSS to option tag, because it is rendered by the Operating System and its Web browser, the select tag is so useful, especially in mobile design, but it is so hard to dealing with it.
For more information I proffer this link. you can use custom react library to implement a select like design. I used relect.
I need is an asterisk in the required fields
I have this code
.required label::after {
content: '*';
color: red;
}
in my html
<div class="required" >
<label for="entity"> entity </label>
<div>
<select id="entity">
<option value="">Entity</option>
</select>
</div>
</div>
This works well.
but I want to put it in a directive.
this is my directive
#Directive({
selector: '[lambRequired]',
host: {
'[style.after.content]': '"*"',
'[style.after.color]': '"red"',
},
})
export class RequiredDirective {
constructor() {
}
}
and in my html
<div >
<label lambRequired for="entity"> entity </label>
<div>
<select id="entity">
<option value="">Entity</option>
</select>
</div>
</div>
but this does not work anymore
help me I will be grateful.
Thank you
You cannot do this by using this approach since pseudo elements are not actually part of the DOM tree. As a consequence of that they are not exposed in any manner on the DOM API.
For you to be able to work with pseudo elements you would need to use a class / css like you were doing before.
But unless you were planning to have more functionality on the directive don’t see what kind of gain you would have to create a directive that would just change the color of the text and append an asterisk without any actual logic or event monitoring. A css class would be way more efficient for such a simple goal.
I have a form with code similar to:
<form class="eng-select" action="action.php" method="POST">
<select name="position">
<option value="disabled" disabled selected>Engineer</option>
<option value="entry-1">John Doe</option>
<option value="entry-2">David Smith</option>
<option value="entry-3">Michael Silk</option>
</select>
</form>
Which produces a dropdown like this:
However I would like to change the css color of the disabled selected entry (what the user sees when they load the page - the picture above). Is this possible, and if so what would the proper CSS call be?
I have looked at similar posts for IE here that mention:
select option [disabled] { background-color: blue; }
but this does not work for me (I am using Google Chrome).
To clarify - I would like to change the CSS before the user clicks and opens the dropdown box.
Your CSS must be
select option[disabled] { background-color: blue; }
Without the space after option. It should work better this way.
With the space, it applies to descendants of the option.
use below css for disabled select option
select option:disabled {
background-color: blue;
}
<form class="eng-select" action="action.php" method="POST">
<select name="position">
<option value="disabled" disabled selected>Engineer</option>
<option value="entry-1">John Doe</option>
<option value="entry-2">David Smith</option>
<option value="entry-3">Michael Silk</option>
</select>
</form>
I would like to change style of #postBtn, if #textfield is empty, something like
#postBtn:[#textfield.value.length==0]{
border-color:gray;
background-color:gray;
}
In html:
<input id='textfield'>
<input type="button" Value="Post" onClick="post()" id="postBtn">
How do I achieve this without javascript?
Thanks!
Ok, you can add required to your input field like so:
<input id='textfield' required>
<input type="button" Value="Post" onClick="post()" id="postBtn">
And then, using :invalid and the adjacent sibling selector (+), you can style the button if the field is empty like so:
#textfield:invalid + #postBtn {
background-color: red;
}
Here is a fiddle of it in action: http://jsfiddle.net/w7377/
Note: If the text input field is not actually a required field, then this solution is not the way to go. You may have to use a Javascript solution if that's the case.