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>
Related
I am trying to remove the arrow/spinners that come natively with a number typed input field. I understand that this can easily be done following the article here, by setting the -webkit-appearance and -moz-appearance. With that said, here is my current implementation using a CSS class called .no-spin.
.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
.no-spin {
-moz-appearance: textfield !important;
}
<div>
<label>Number Input Field w/o spinner</label>
<input class="no-spin" type="number">
</div>
<div>
<label>Number Input Field w/ spinner</label>
<input type="number">
</div>
However, since I am using Tailwind, I am looking for a possible solution where I do not have to resort to CSS classes, just like the other components of my project. I have already tried using an appearance-none class as suggested by the Tailwind Docs but it did not work for me.
Yes, you could add [appearance:textfield] which would be generated as:
.\[appearance\:textfield\] {
-webkit-appearance: textfield;
appearance: textfield;
}
That should do the trick enter code here
<script src="https://cdn.tailwindcss.com"></script>
<div class="m-2 bg-green-200">
<input class="[appearance:textfield] m-4 bg-gray-100" type="number" name="" placeholder="1" id="" />
</div>
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.
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).
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/
I am trying to make two hyperlinked buttons go side by side. I saw this question but can not make the answers work. Below are my two attempts to make the buttons go side by side. The first attempt works but hyperlinks to the wrong location. The second one hyperlinks correctly but is not side by side. The third based on this question doesn't link anywhere but I think that has to do with using links instead of Javascript:submitRequests().
<!DOCTYPE html>
<html>
<body>
<head>
<style>
.container {
overflow: hidden;
}
button {
float: left;
}
button:first-child {
margin-right: 5px;
}
</style>
</head>
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 1
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
</form>
Attempt 2
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form><form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 3
<div class="container">
<button onclick="http://trinker.github.io/qdap_dev/paste2.html">paste2</button>
<button onclick="http://trinker.github.io/qdap_dev/colSplit.html">colSplit</button> text
</div>
</body>
</html>
If you just need plain links to work, just use links and style them to look like buttons (see also Styling an anchor tag to look like a submit button):
<style>
.button {
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
font: menu;
color: ButtonText;
display: inline-block;
padding: 2px 8px;
}
</style>
<div class="container">
paste2
colSplit text
</div>
You could also do <button>paste2</button> but this is not actually legal HTML5. FWIW, Firefox does seem to render it correctly though.
buttons would line up side by side automatically since they're display: inline-block by default (I think). I'd remove the float: left since it could be causing some issues when nesting.
You should never nest forms. It'll lead to some really screwy things.
However, if you want two forms side by side you can make them do that by adding display: inline to them. Here's a small demo: http://jsbin.com/UgaMiYu/1/edit
The onclick attribute should't make any difference at all.
I just tried to add css to attempt 2. how about this:
HTML:
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2"/></form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit"/>
</form>
CSS:
form{
float:left;
}
DEMO: http://jsfiddle.net/uzDZN/
NOTE: Add class to form which has this buttons. Otherwise css may effect other form elements in website.
Utilizing regular buttons and setting their display property to either inline or inline-block worked for me.