I'm running Prestashop 1.7 and am using it's freely available GDPR compliance module, which i've hooked into the newsletter .tpl. All of the checkboxes are defined by the .custom-checkbox input ID. If I edit this one, every checkbox on the website changes it's colors.
Hence, what I'm trying to achieve is, modifying the checkbox that is used by the class gdpr_module_16.
I'd like to modify a specific .custom-checkbox input[type=checkbox]+span
.custom-checkbox input[type="checkbox"] + span .checkbox-checked {
display: none;
margin: -.25rem -.125rem;
font-size: 1.1rem;
color: #232323;
}
The html structure looks like this:
<div id="gdpr_consent" class="gdpr_module_16">
<span class="custom-checkbox">
<label class="psgdpr_consent_message">
<input id="psgdpr_consent_checkbox_16" name="psgdpr_consent_checkbox" value="1" type="checkbox">
<span><i class="material-icons rtl-no-flip checkbox-checked psgdpr_consent_icon"></i></span>
<span>Dummytext dummy dummy</span>
</label>
</span>
And the one that I want to address pops up in the firefox dev tool if I select
<i class="material-icons rtl-no-flip checkbox-checked psgdpr_consent_icon"><div></div></i>
I've tried to address it via
.custom-checkbox input[type=checkbox]+span .gdpr_module_16 .psgdpr_consent_checkbox
.custom-checkbox input .gdpr_module_16 .psgdpr_consent_checkbox
.gdpr_module_16 .psgdpr_consent_checkbox .custom-checkbox input[type=checkbox]+span
and
.gdpr_module_16 .psgdpr_consent_checkbox .custom-checkbox
My
border-color:white;
hasn't workt with any of them.
Related
I'm using Contact Form 7 plugin in Wordpress to add a form. I'm running into a problem when using textarea in the form; I have my tags styled with background-color: #0090bc;. However, it is displaying below the textarea also.
FRONT-END CODE FOR HOWARD E
Hope this helps
<p><label>Aim of Website<br>
<span class="wpcf7-form-control-wrap your-website-goal-1"><textarea name="your-website-goal-1" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="e.g. 'I just need a website so that I can link people to it through social media'..."></textarea></span></label></p>
I've tried wrapping it in a div and setting the CSS
.full-spread textarea{
width: 100%;
height: 100%;
float: left;
position:relative;
}
Although this technically fixes the issue I run into another one where there is no gap between the next element below this div then - and I can't figure out how to resolve that new issue then either.
This, however, doesn't solve my issue so you can ignore it.
Here is my code to support the screenshots:
<label>Aim of Website[textarea your-website-goal-1 placeholder "e.g. 'I just need a website
so that I can link people to it through social media'..."]</label>
</div>
<label>Websites you've seen online that you like
[textarea influenced-website-1 placeholder "e.g. ''www.thiswebsite.com' - I like how this website details everything on one page'..."]</label>
<div>
My label tags are target with this CSS:
.wpcf7-form label {
text-align:center;
color: white;
padding-top: 5px;
background-color: #0090bc;
border-radius: 4px 4px 0px 0px;
}
Targeting this textarea by adding margin-bottom:-1%; it removes the extra bit of the label tag showing under the textarea
<span class="wpcf7-form-control-wrap your-website-goal-1"><textarea name="your-website-goal-1" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="e.g. 'I just need a website so that I can link people to it through social media'..."></textarea></span>
I am trying to integrate an HTML 5 required checkbox into a form:
<p>
<input class="checkbox" type="checkbox" required name="terms"> By submitting you agree to the processing of your data for the purpose of processing your request/booking.
<br>
<a href="/en/datenschutz.php" target="_blank">
<u>Privacy Policy</u>
</a>
</p>
It is not displaying in a single browser. I haven't had this problem with other sites before, this site is running Bootstrap v2.2.2.
I found some possible solution with labels which didn't work.
Your Style.css file has this rule:
input[type="checkbox"] {
display: none;
}
Delete it and you will see your checkbox.
If you need that rule for whatever reason and you only want to override it for this particular checkbox, then you'll have to add another CSS rule to override it. Obviously, adding an inline style will do the job, but it might be not the best way to go:
<input class="checkbox" type="checkbox" required name="terms" style="display: inline-block;">
Your style.css might contain the appearance css property. This is used to display an element using platform-native styling, based on the operating system's theme. Look up : https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
your code might contain a css rule such as:
input {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}
if you wanna keep this property and change the checkbox specifically then use :
input[type="checkbox"] {
appearance: checkbox !important;
}
You can use both css.
But here
style="display: inline-block;"
inside input type are override display: none;
input.checkbox {
display: inline-block;
}
/*input[type="checkbox"] {
display: inline-block;
}*/
<p>
<input class="checkbox" type="checkbox" required name="terms">By submitting you agree to the processing of your data for the purpose of processing your request/booking.
</p>
<a href="/en/datenschutz.php" target="_blank">
<u>Privacy Policy</u>
</a>
I have the following HTML
<label class="item formulario item-input item-floating-label" ng-class="{'has-error': registroForm.nombre.$invalid && registroForm.nombre.$dirty, 'valid-lr': registroForm.nombre.$valid && registroForm.nombre.$dirty}">
<span class="input-label">Nombre</span>
<input type="text" placeholder="Nombre" name="nombre" ng-model="vm.nombre"
pattern="[A-Za-z'áéíóú ]+"
ng-minlength="2"
ng-maxlength="30"
required>
</label>
I need to set the following style:
label.item.formulario {
border-style: none none solid none;
border-color: darkblue;
}
But the custom style is not taking effect. If I remove my custom name ".formulario" from my CSS selector and also from the class list in my HTML, the style works perfect BUT it modifies the wholes label with an item class. I just need to modify a specific label, this is the reason what I'm trying to create a custom class.
What's wrong?
Thanks for helping!
I've just tested it here and the style does take effect :
https://jsfiddle.net/8eo8crz1/
label.item.formulario {
border-style: none none solid none;
border-color: darkblue;
}
If you want to have a unique custom style for each label, you'll need to use an id instead of a class (or in addition to the classes you're using).
currently I'm using the following plugin:
gulp-clean-css
This is my layout:
<div class="checkbox">
<label>
<input type="checkbox" disabled="disabled" checked="checked">
<span class="checkbox-material" style="margin-right: 10px">
<span class="check"></span>
</span>I'm supposed to be checked and disabled
</label>
</div>
Then in my CSS:
.checkbox input[type=checkbox]:checked+.checkbox-material .check {
color: #2196f3; // when the input's disabled is set to false
}
.checkbox input[type=checkbox][disabled]:checked+.checkbox-material .check{
color:#9E9E9E!important;cursor:not-allowed!important; // When the input is disabled
}
The issue is that when I run the code optimized, (minified) The second selector is not being taken in account. Although it exists on the stylesheet
Any ideas?
All,
I need to have any input validation messages display below the element instead of next to it. The base CSS file puts a margin-bottom = 19px on the <input /> element so I need to offset this because if I don't the message gets inserted 19px below the input element.
Example:
http://jsfiddle.net/L28E7/2/
ASP.NET is generating all of the HTML so I am hamstrung somewhat in terms of what I can do.
I can access the .field-validation-error class and override it so that's what I did.
My CSS works (In FireFox at least) and produces the following:
I had to use negative margin-top to get the message right under the element, which I am not happy with.
How can I improve this?
Thank you!
The CSS
div .field-validation-error {
color: #C1372A !important;
display: block;
font-weight: normal !important;
margin-top: -19px;
margin-bottom: 10px;
}
The HTML
<div>
<label for="NewClub.NewClubName">Name your club!!!</label>
<span class="required">*</span>
</div>
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName"></span>
if this is how your HTML looks after the creating of inline error message
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName">heloo hell</span>
Then use the below css. This will automatically put your message below the text box
.field-validation-error {
color: #C1372A !important;
display: block;
font-weight: normal !important;
}
Here is the fiddle
http://jsfiddle.net/L28E7/