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:
Related
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.
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"] { ... }
I have validation for 2 fields which are country code and actual mobile number. I have attached screenshot. When correct country code is given and invalid mobile no is given at that time correct tick glyphicon for country code and cross glyphicon comes which overlaps on each other. I need to remove glyphicon for country code by using css or js. Any help will be appreciated.
If you're using jQuery:
let's say you have
<div class="container">
<div class="form">
form content...
</div>
</div>
you would call:
$('.container form .glyphicon').each(function(i){ // your target input id or class should be placed between 'form' and '.glyphicon' eg: $('.container form input[name=state_code] .glyphicon')
if (i!=0) $(this).remove();
});
this way you get rid of the additional Xes appearing when you don't need.
I have found the answer. I have done it by using jQuery.
My actual HTML was as below,
<div class="input-group">
<div class="input-group-addon">+</div>
<input type="tel" maxlength="3" class="form-control pull-left" id="CountryCode" name="CountryCode" placeholder="Code">
<input data-bv-field="Mobile" type="text" id="Mobile" name="Mobile" class="form-control">
</div>
Bootstrap creates glyphicons for correct and wrong below the html as below,
<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="CountryCode" style=""></i>
<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="Mobile" style=""></i>
So I have added following one line code to remove correct and wrong glyphicons for country code field,
$("#CountryCode").parent().next().removeClass('glyphicon-ok glyphicon-remove');
For this html code, I want to select an element using CSS.
I need to select "Cvv2 required" by referencing validatedMessage. I was thinking of trying .validateMessage + .Cvv2.required .However, that didn't work. It seems "Cvv2 required" is after "CCNumber required". But I need to reference "validatedMessage" which is inside "CCNumber required". I don't even know thats the proper jargon to explain this relationship....
<div class="CCNumber required">
<label id="label">Credit Card Number:</label>
<input name="test" type="text" class="wrong">
<span class="validatedMessage">Required</span> <br>
</div>
<div class="Cvv2 required">
<a> What's this</a><br>
</div>
This is not currently possible with pure CSS.
You are looking for some kind of "contains" query, which is not available.
https://css-tricks.com/child-and-sibling-selectors/#article-header-id-4
I have the following mdl-textfield:
<div class="mdl-textfield mdl-js-textfield" id="step_condition">
<textarea class="mdl-textfield__input" type="text" rows="25"> </textarea>
<label class="mdl-textfield__label" for="step_json">Step condition</label>
</div>
To set the value of the field I use:
$("#step_condition").get(0).MaterialTextfield.change('100');
My questions are:
is this the correct way of setting the value of the field?
is there a similar way to fetch the value of the field?
I know I can fetch the value directly from the textarea, but somehow it seems to make more sense to use the API.
You should add an id to the textarea itself, like:
<div class="mdl-textfield mdl-js-textfield" >
<textarea class="mdl-textfield__input" type="text" rows="25" id="step_json"></textarea>
<label class="mdl-textfield__label" for="step_json">Step condition</label>
</div>
Look at the example on the official specifications, there is no id at the div level. http://www.getmdl.io/components/index.html#textfields-section
To set up the value of the field you could do
$("#step_json").val("100");
However you will have to deal with the fact that the label is not removed automatically. This post should help: https://github.com/google/material-design-lite/issues/903