I have a button and I would like to change the css when someone focuses on the input field.
html body form div#composite-field input[type=email]:focus ~ html body form div#composite-field input[type=submit] {
color: #ffffff;
background-color: #2e4e67;
}
HTML:
<form method='post' class="animate" autocomplete="off">
<div id="composite-field">
<input type='email' class='animate' value='' placeholder='Е-mail Адреса'>
<input type='submit' class='animate' value='>'>
</div>
</form>
As far as I've looked up online, I have the selector setup properly. But for some reason it isn't working.
I'd appreciate another set of eyes to help identify the problem?
Thanks
~ is a general sibling combinator. Thus, the elements have to be siblings in order for it to be selected.
Based on the HTML you provided, use the following:
Example Here
form div#composite-field input[type=email]:focus ~ input[type=submit] {
color: #ffffff;
background-color: #2e4e67;
}
You already narrowed the selector down to the #composite-field element. After the combinator, ~, you would just specify the sibling element you are trying to select. You were trying to select a sibling html element, and then select the input[type=submit] element within it. Since it isn't a sibling of input[type=email], nothing was selected.
Related
I want to find out if it is possible to target both neighboring elements using the middle one?
for example:
<div>
<span class="icon">icon</span>
<input id="input" class="input error" type="text" />
<label for="input"></label>
<div>
When the input has the error class I want to target the label and the span to have the color red.
I managed to make the label red with the following:
input.error ~ label {
color: red;
}
However I've had no luck with the span. Can somebody maybe tell me if this is possible? and if so please help.
You can use flexbox with the order property to re-order the elements visually, while having the input as the first element in the DOM so you can use the general sibling selector.
div {
display: flex;
}
.icon {
order: -1;
}
input.error ~ * {
color: red;
}
<div>
<input id="input" class="input error" type="text">
<span class="icon">icon</span>
<label for="input">label</label>
<div>
I used jquery .siblings() to target the span and add a class to it.
I want to find out if it is possible to target both neighboring
elements using the middle one?
You can use the axe selector % to target both neighbouring elements.
Since there is no shared class or element type between .icon and label, you'll need to declare:
input.error % .icon,
input.error % label {
color: red;
}
Alternatively, (in this case) you might combine the CSS immediate subsequent sibling selector + and the axe immediate previous sibling selector ?:
input.error ? .icon,
input.error + label {
color: red;
}
I have a form where if someone checks a specific input, I want it to show a div. The problem is that the input does not share the same parent as the subsequent div (and can't, for framework reasons). So for example:
<div>
<input id="test" type="radio">
</div>
<div id="ShowIfTestIsChecked">
<!--content to show if test input is checked-->
</div>
This CSS almost works, but is broken by the fact that the div I want to show is not inside the parent of the input:
#test ~ #ShowIfTestIsChecked{
display:none;
}
#test:checked ~ #ShowIfTestIsChecked{
display:block;
}
Is there some other CSS trick I can use here to make this work? This is easy to do with javascript, but I'd like a CSS only way to do it.
Doing this in css would require being able to select the parents div and then the next div which isn't possible in css, You can only select the next or children elements in a css selector.
Why do you want to wrap the input in a div in the first place?
Gimme a sec I'll post an update with css trick that works they way you want but requires changing the first div element into a form element.
So you have to chance the html or us js.
For html you've got 2 options , put the content of each div together or use a form element:
<form>
<input id="trick" type="radio" name="trick" required />
</form>
<div id="ShowIfTestIsChecked">
Hello world
</div>
#ShowIfTestIsChecked {
display: none;
}
form:valid ~ #ShowIfTestIsChecked {
display: block;
}
Just put your checkbox and div together:
<input id="test" type="radio">
<div id="ShowIfTestIsChecked"></div>
#test:checked ~ #ShowIfTestIsChecked {
display: block;
}
There's no other CSS-way.
I'm trying to style the first legend element within nested fieldsets, but none of the CSS selectors I used achieve what I'm after.
http://codepen.io/anon/pen/epodxd
I basically want to style the first legend element without using any additional CSS class if possible.
<fieldset class="nested-parent">
<legend>Parent</legend>
<input type="text" size="10" />
<fieldset>
<legend>Child</legend>
<input type="text" size="20" />
</fieldset>
</fieldset>
.nested-parent legend:first-child {
color: red;
}
Based on the HTML you provided, you could use the child selector, > in order to select the first legend element that is a direct child of the .nested-parent element:
.nested-parent > legend:first-child {
color: #f00;
}
I would suggest using the :first-of-type pseudo class instead though. It will be more accurate when dealing with the element's types.
Example Here
.nested-parent > legend:first-of-type {
color: #f00;
}
I have 2 inputs (for email and phone) and a button. I want to use rule for button only if input[type="tel"]:valid and input[type="email"]:valid at the same time, but I can't do it correctly. Is there a way of doing this using css?
Try something like this:
input[type='tel']:valid ~ input[type='email']:valid ~ button {
color: green;
}
This assumes that the two input fields and the button are direct siblings.
Your question is not clear. However I try to answer
CSS:
:valid selector is normally on a input element where the user types data and if its a valid type it shows the css style for :valid and css style for :invalid if invalid.
input[type="tel"]:invalid, input[type="email"]:invalid {
border: 2px solid red;
}
input[type="tel"]:valid, input[type="email"]:valid {
border: 2px solid green;
}
The button is normally used to submit the form. If the inputs are part of form element than the browsers validates the form before submission. You can also use javascript to validate the form before submission by adding onsubmit="return validateForm()".
<form action="demo_form.asp" method="post" **onsubmit="return validateForm()"**>
<input type="tel" name="telephone" required>
<input type="email" name="email" required>
<input type="submit" value="button">
</form>
This question already has answers here:
Can the :not() pseudo-class have multiple arguments?
(5 answers)
Closed 7 years ago.
I understand the basic gist of using :not() in CSS, but it doesn't seem to work for me. I am trying to do something like:
input[type=text][readonly]:not(.class1, .class2) {
background-color: #DDDDDD;
color: #1E1E1E;
}
But this does nto seem to work for me. whenever I read any information on this, it will have examples like input:not(.class1, .class2) {, but nothing between the tag and the :not() part. Am I correct in assuming that the syntax I have written is incorrect? Can I not define the tag element any more if I use :not()?
Your only issue is that you're passing two selectors inside the :not() use only one per statement.
Currently extended arguments (foo, bar) are not supported by any browser.
Use
:not(.class1):not(.class2)
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot
input[type=text][readonly]:not(.class1):not(.class2) {
background-color: #DDDDDD;
color: #1E1E1E;
}
<input type=text readonly class="class1">
<input type=text readonly>
<input type=text readonly class="class2">
:not accepts only simple selectors, and not lists of them.
So your selector should look like:
input[type=text][readonly]:not(.class1):not(.class2) {...}
Use it combined way:
:not(.class1):not(.class2)
The :not selector is not a function. It is like any other selector taking in the other selector.
Your final CSS should be:
input[type=text][readonly]:not(.class1):not(.class2) {
/* Styles */
}
Snippet
input[type=text][readonly]:not(.class1):not(.class2) {
background-color: #DDDDDD;
color: #1E1E1E;
}
<input type=text readonly class="class1">
<input type=text readonly class="class2">
<input type=text readonly>