I am currently trying to modify the CSS of a generated HTML page. I do not have access to run scripts on this page or change the base HTML.
The form has inputs and I am trying to create floating labels for them, which I typically do something like this:
<input id="email">
<label for="email">E-mail</label>
With CSS something like this:
input:focus + label { top: 100%; }
However the generated HTML is structured like this, with the label before the input and error blocks between:
<label for="email">Email Address</label>
<div aria-hidden="true" class="error itemLevel">
<p aria-live="polite" role="alert" tabindex="1">Please enter a valid email address.</p>
<input aria-required="true" id="email" title="Email address that can be used to contact you." type="text">
How would I target the label with pure CSS?
You can use an attribute selector:
label[for="email"] { ... }
Related
I've a number field in NinjaForms where I would like to add a suffix (in my case this is a "Name your Price" where I'd like the input number to be followed by currency). I understand I should use an ::after element with content attribute, but I can't help achieving this. Could you help me?
This is the output code:
<div id="nf-field-108-wrap" class="field-wrap number-wrap" data-field-id="108">
<div class="nf-field-label">
<label for="nf-field-108" id="nf-label-field-108" class="">Name your donation <span class="ninja-forms-req-symbol">*</span>
</label>
</div>
<div class="nf-field-element">
<input id="nf-field-108" name="nf-field-108" aria-invalid="false" aria-describedby="nf-error-108" class="ninja-forms-field nf-element" aria-labelledby="nf-label-field-108" required="" type="number" value="50" min="25" max="" step="5">
</div>
</div>
And this is how to field looks like:
I came up with this, not exacly what I wanted but in case of no further ideas I'll share if anyone using Ninja Form would need the same.
This is my css:
#nf-field-108-wrap > div.nf-field-element::after { content:"€" !important;...}
input#nf-field-108 {width: 100px;}
resulting in this:
I need CSS code to restrict submit button if fields are empty.Daily we are receiving 3-5 blank inquiries through our WordPress landing page submit button.
Where to put these CSS codes if any.
Thanks
You really should do this with a script, because doing something like this by CSS is very sensitive to any future changes to your form structure.
It can be done with only CSS, using the :placeholder-shown selector.
For this you'll need to add a placeholder to all text inputs.
/* As long as one of the selectors is matched, the button won't show. */
form input:placeholder-shown ~ button,
form textarea:placeholder-shown ~ button {
display: none;
}
<form>
first name: <input type="text" name="firstname" placeholder="Enter first name"><br>
Last name: <input type="text" name="lastname" placeholder="Enter last name"><br>
Text area<br>
<textarea name="textarea" placeholder="Enter some text..."></textarea>
<br>
<button type="submit">Submit</button>
</form>
This will work, but for any change in the form you'll need to make sure it doesn't break.
I personally won't use this :)
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 have this html:
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
I want to place the label Where? before location and What? before keywords using css.
Tried:
label[What?]:before {
content: "search_location";
color: green;
}
Didn't work.
At the moment the label location listed in my html shows up as a placeholder, not a label- likewise for the label search keywords This is fine but i would like those placeholders replacing with, for location London, Berlin, Bristol... and for search keywords Chef, Cleaner, Manager...
It's perhaps clearer if you view at: https://adsler.co.uk/jobs/
Couldn't you just place the label with html? Like this
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label style="color: green;">What?</label>
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label style="color: green;">Where?</label>
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
Based on the HTML snippet you've provided, your CSS selector label[What?]:before is not going to resolve to anything. Square brackets [] are used to select elements based on one of their attributes (see attribute selector definition). You appear to be trying to pass in a desired value (which doesn't exist yet) as an attribute selector, which is impossible.
Looking at the site, the other trouble you're having is that the labels themselves have been hidden. This is currently in your CSS, so will need to be changed or otherwise overridden:
.job_filters .search_jobs div label {
display: none;
}
Then, as already suggested by Mr Lister, something like this will get you on the right track. I've tested in the browser on your site and it works once the labels have been unhidden:
label[for="search_location"]:before {
content: "Where?";
}
label[for="search_keywords"]:before {
content: "What?";
}
I'm going to assume that your actual intention is for the labels to display but you want to change their existing values from "Keywords" and "Location" using only CSS? It's not achievable. You could use a bit of JavaScript to change the text content, but not by CSS with your current implementation.
That's pretty much the question. I have a bootstrap toggle button. I want to increase the size of the text (the data-on attribute and data-off attribute)
<input type="checkbox" checked data-toggle="toggle" data-style="android" data-onstyle="info" data-offstyle="info" data-on="increaseSize" data-off="increaseSize" data-width="500" data-height="200" data-size="large">
Heres what it looks like on the phone.
#Rockstar5645
simply by using CSS:
.toggle.android .toggle-group label {
font-size: 20px;
}
html (as posted, no change):
<input type="checkbox" checked data-toggle="toggle" data-style="android" data-onstyle="info" data-offstyle="info" data-on="increaseSize" data-off="increaseSize" data-width="500" data-height="200" data-size="large">