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.
Related
So I'm trying to add some additional CSS on Wordpress and override the color of this form button but nothings happening. Am I entering the right code in here?
When I inspect the button this comes up...
<form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-1527" method="post" data-id="1527" data-name="Get Started"><div class="mc4wp-form-fields"><div class="input-group">
<div class="input-icon"><i class="far fa-paper-plane"></i></div>
<input type="email" placeholder="Your email address" class="form-control" name="email" data-error="e-mail field is required" required="">
<button type="submit" value="Subscribe" class="item-btn">Subscribe</button>
</div></div><label style="display: none !important;">Leave this field empty if you're human: <input type="text" name="_mc4wp_honeypot" value="" tabindex="-1" autocomplete="off"></label><input type="hidden" name="_mc4wp_timestamp" value="1635448917"><input type="hidden" name="_mc4wp_form_id" value="1527"><input type="hidden" name="_mc4wp_form_element_id" value="mc4wp-form-1"><div class="mc4wp-response"></div></form>
The reason why I've tried button.item-btn::before is because it shows this in the inspector
Try adding the CSS styling as inline with the button element.
Inline styling will override the styling from an external css file.
You can also try using the id selector id=mc4wp-form-1 in your form element to increase the css style specificity to help overwrite the default.
Your selector minus the pseudo-element should do the job.
Maybe there is another background-color definition for buttons in your stylesheets with higher specificity.
You could try raising the specificity of your selector like this:
#mc4wp-form-1 button.item-btn {
background-color: mycolor;
}
I am using a styling for all the input fields but there is one field for which i do not want that style. Is there any way i can disable the css for that particular field and let it be for others.
You can add a css class to that element and use :not pseudo-class selector:
input:not(.notred) {
background: red;
}
<input name="text1">
<input name="text2">
<input name="text3">
<input class="notred" name="text4">
<input name="text5">
<input name="text6">
In CSS3, you can use ‘:not()’ to exclude an element using id or class.
add a class to that input which you want to disable, then in css
input:not(.that_class)
Let me know if you have any issue.
Let's say that I have two input fields and one of them in mandatory the other not.
They should function as standard placeholders, except the placeholder text of the mandatory field should be red, the other should be placeholder default and they should both look the same after some text us input.
How do I achieve that, using CSS?
You're probably helped by using the :required pseudo selector, possibly combining with the ::placeholder pseudo selector.
HTML:
<input type="text" id="name" name="name" placeholder="Your Name" required />
CSS:
input:required {
// CSS
}
input:required::placeholder {
// CSS
}
I am new to html5 coding, so would someone kindly help me with my problem.
I am doing a school work where I need to specify the pattern on the text field in html5 to only accept 6 digits and 1 letter ONLY (eg. 123456A).
I managed to get what I want but, the problem is that how to display the error if the user types wrongly?
This school assignment of mine must be done with only html5 and css. No Javascript whatsoever. Thanks for your expertise.
So far here's what I've done.
<form action="action_page.php">
Enter Adm No:
<input type="text" name="admNo" pattern="[0-9]{6}[A-Za-z]{1}"
title="6 digits and 1 letter" required/>
<input type="submit" />
</form>
Your code seems to work fine, but it won't display any message, just a red border.
You can eventually try to insert a text as long as pattern do not match and even hide the submit input.
example with the pseudo class :invalid and an extra tag to allow text to be inserted while pattern required doesn't match.
/* possible style */
input:invalid {
color: red;
/* turn to red as long as pattern do not match */
}
input:invalid+b:before {
content: 'Invalid Number';/* add text untill patterns matches */
}
input:invalid+b+[type="submit"] {
display: none; /* hide input submit untill pattern matches */
}
<form action="action_page.php">
Enter Adm No:
<input type="text" name="admNo" pattern="[0-9]{6}[A-Za-z]{1}" title="6 digits and 1 letter" required/>
<b><!-- can be used to insert text via pseudo element where input do not--></b>
<input type="submit" />
</form>
You can take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/:valid
You can't really do anything regarding only displaying the alert if the field is invalid, because technically the field is invalid until it meets the validation pattern. But you could do something like this:
https://jsfiddle.net/Ld5fuz75/2/
input ~ .alert {
display: none;
}
input:invalid ~ .alert {
display: block;
}
<form>
Enter Adm No:
<input type="text" name="admNo" pattern="[0-9]{6}[A-Za-z]{1}" title="6 digits and 1 letter" required />
<input type="submit" />
<span class="alert">Form is invalid</span>
</form>
I am trying to style an element only when that element has a value attribute.
The value attribute is variable (it's a date), but it's the only thing that changes between "no value" and "has value" which I need to style differently.
Is it possible to use a wildcard in the CSS selector ascertain whether the value attribute is present? E.g:
HTML
<input class="thing" value="variable-something">...</input>
<input class="thing">...</input>
CSS
.thing[value="*"] {
...
}
OR
.thing[value=*] {
...
}
I've tried this solution but use of the " makes it look for a specific string. Doing .thing[value=*] is invalid and won't compile.
Any advice?
<input type="text" value="">
<input type="text">
input[value]{
background: #ccc;
}
Try it yourself https://jsfiddle.net/55rjf0y8/
You can use below code
input[value]{background: red;}
<input type="text">
<input type="text" value="">