I don't know why it doesn't move, I'd like to know what's wrong
Here is the css (sass)
.find-property-main
.custom-inputs
position: relative
display: inline-block
.placeholder-label
bottom: -1px !important
font-size: 0.8rem
text-transform: uppercase
color: #707274 !important
position: absolute
pointer-events: none
#include customize-transition ($duracion: 0.5s)
.placeholder-input
font-size: 0.8rem
text-transform: uppercase
border: none
border-bottom: solid 2px #ced4da
border-radius: 0
margin: 0
padding: 0
height: calc(1rem + 0.75rem + 2px)
.custom-inputs input:focus ~ .placeholder-label, .custom-inputs input:not(:focus):valid ~ .placeholder-label
bottom: 12px !important
font-size: 0.7rem
font-weight: bold
color: rgb(17, 38, 78)
Here is the HTML
<form action="#" method="$_POST" class="border p-5 find-property-main">
<div class="form-form col-3 custom-inputs">
<label class="placeholder-label">Tamaño</label>
<input list="casa" type="text" class="form-control placeholder-input" placeholder="">
<datalist id="casa">
<option value="Pequeña">
</option>
<option value="Mediana">
</option>
<option value="Grande">
</option>
</datalist>
</div>
I have already reviewed it, and apparently everything is fine, but when I try to enter data the label does not move.
I would like to know what I'm doing wrong, thanks.
The problem is that your selector targets a <label /> which has a focused <input /> as predecessor. But in your html, the label comes first and the input after it. In order for the selector to work, you would have to switch them around:
<form action="#" method="$_POST" class="border p-5 find-property-main">
<div class="form-form col-3 custom-inputs">
<input list="casa" type="text" class="form-control placeholder-input" placeholder="">
<label class="placeholder-label">Tamaño</label>
<datalist id="casa">
<option value="Pequeña">
</option>
<option value="Mediana">
</option>
<option value="Grande">
</option>
</datalist>
</div>
Related
I'd like to style a file input that a plugin I bought generates in the frontend to a nice CSS button.
I read many posts and articles how to style file inputs by using the label and hiding the input. However, in my case this doesn't work as the label isn't directly adjacent to the input.
Is there another way to somehow style this beautifully and get rid of the ugly grey default "choose file" button and the "no file chosen"?
I'd very much appreciate any help!
Many thanks
JSFiddle: https://jsfiddle.net/AlphaX/0zanegc8/
<p class="form-row thwcfe-input-field-wrapper" id="additional_upload_field" data-priority="40" data-rules="" data-rules-action="" data-validations="">
<label for="additional_upload" class="">Example files <span class="optional">(optional)</span></label>
<span class="woocommerce-input-wrapper">
<input type="hidden" class="thwcfe-checkout-file-value input-text thwcfe-input-field" name="additional_upload" id="additional_upload" value="" data-nonce="6467d03bb7">
<input type="file" class="thwcfe-checkout-file " name="additional_upload_file" id="additional_upload_file" placeholder="" value="" multiple="">
<span class="thwcfe-uloaded-files" style="display:none;">
<span class="thwcfe-upload-preview" style="margin-right:15px;">
</span></span>
<span class="thwcfe-file-upload-status" style="display:none;">
<img src="https://auraly.de/wp-content/plugins/WC plugin Themehigh checkout fiel editor-pro/public/assets/css/loading.gif" style="width:32px;"></span>
<span class="thwcfe-file-upload-msg" style="display:none; color:red;"></span>
</span>
</p>
Unfortunately, using a label is your best bet unless you decide to use a CSS framework like bootstrap to handle this for you.
I know you mentioned your labels not being adjacent to the input. If possible, just wrap an additional label around your input specifically for this purpose.
Note: Make sure your label's for attribute matches up with your inputs id.
See the example below:
.fancy-upload {
border: 1px solid #ccc;
background-color: blue;
color: white;
display: inline-block;
padding: 5px 10px;
cursor: pointer;
}
#additional_upload_file {
display: none;
}
<p class="form-row thwcfe-input-field-wrapper" id="additional_upload_field" data-priority="40" data-rules="" data-rules-action="" data-validations="">
<label for="additional_upload" class="">Example files <span class="optional">(optional)</span></label>
<span class="woocommerce-input-wrapper">
<label for="additional_upload_file" class="fancy-upload">
FANCY UPLOAD
<input type="hidden" class="thwcfe-checkout-file-value input-text thwcfe-input-field" name="additional_upload" id="additional_upload" value="" data-nonce="6467d03bb7">
<input type="file" class="thwcfe-checkout-file " name="additional_upload_file" id="additional_upload_file" placeholder="" value="" multiple="">
</label>
<span class="thwcfe-uloaded-files" style="display:none;">
<span class="thwcfe-upload-preview" style="margin-right:15px;">
</span></span>
<span class="thwcfe-file-upload-status" style="display:none;">
<img src="https://auraly.de/wp-content/plugins/WC plugin Themehigh checkout fiel editor-pro/public/assets/css/loading.gif" style="width:32px;"></span>
<span class="thwcfe-file-upload-msg" style="display:none; color:red;"></span>
</span>
</p>
EDIT: You can also use the ::file-selector-button CSS pseudo element but it's not widely supported.
input[type=file]::-webkit-file-upload-button {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
transition: 1s;
}
input[type=file]::file-selector-button {
border: 2px solid #6c5ce7;
padding: .2em .4em;
border-radius: .2em;
background-color: #a29bfe;
transition: 1s;
}
input[type=file]::-webkit-file-upload-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
input[type=file]::file-selector-button:hover {
background-color: #81ecec;
border: 2px solid #00cec9;
}
<p class="form-row thwcfe-input-field-wrapper" id="additional_upload_field" data-priority="40" data-rules="" data-rules-action="" data-validations="">
<label for="additional_upload" class="">Example files <span class="optional">(optional)</span></label>
<span class="woocommerce-input-wrapper">
<input type="hidden" class="thwcfe-checkout-file-value input-text thwcfe-input-field" name="additional_upload" id="additional_upload" value="" data-nonce="6467d03bb7">
<input type="file" class="thwcfe-checkout-file " name="additional_upload_file" id="additional_upload_file" placeholder="" value="" multiple="">
<span class="thwcfe-uloaded-files" style="display:none;">
<span class="thwcfe-upload-preview" style="margin-right:15px;">
</span></span>
<span class="thwcfe-file-upload-status" style="display:none;">
<img src="https://auraly.de/wp-content/plugins/WC plugin Themehigh checkout fiel editor-pro/public/assets/css/loading.gif" style="width:32px;"></span>
<span class="thwcfe-file-upload-msg" style="display:none; color:red;"></span>
</span>
</p>
I have CSS-customized radio buttons, which have required validation. The default radio buttons are hidden by CSS rule.
When I submit the form, the default validation message is also hidden.
Form looks like this
How can I display default error message (like: Please select one of the options) while disabling radio buttons? (Pure HTML/CSS without using Js)
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
visibility: hidden;
}
input[type="radio"]:checked +label {
border: 1px solid blue;
}
<h3>Gender</h3>
<input id="male" type="radio" name="gender" value="male" required>
<label for="male">Male</label>
<input id="female" type="radio" name="gender" value="female" required>
<label for="female">Female</label>
<input id="other" type="radio" name="gender" value="other" required>
<label for="other">Rather not to say</label>
as #joostS said, hidden radio button will not trigger native error message. for that we need to hide it using opacity. I have created sample example.
Also it will not trigger validation until we submit the form by clicking on submit button. If you need validation on "onChange" event of any form elements, then we need to use jQuery or Javascript solution to achieve that.
I hope it will be helpful.
label {
display: inline-block;
border: 2px solid #83d0f2;
padding: 10px;
border-radius: 3px;
position: relative;
}
input[type="radio"] {
opacity: 0;
position: absolute;
z-index: -1;
}
input[type="radio"]:checked +label {
border: 1px solid #4CAF50;
}
input[type="radio"]:invalid +label {
}
<h3>Gender</h3>
<form>
<input id="male" type="radio" name="gender" value="male" required>
<label for="male">Male</label>
<input id="female" type="radio" name="gender" value="female" required>
<label for="female">Female</label>
<input id="other" type="radio" name="gender" value="other" required>
<label for="other">Child</label>
<input type="submit" />
</form>
You could try using the CSS :invalid pseudo-class. Use this HTML:
<label for="male">Male</label>
<input id="male" type="radio" name="gender" value="male" required>
<span class="error-message">Please select on of the options</span>
And the following CSS:
input[name=gender] + .error-message { display: none; } // or whatever you wanna do with it
input[name=gender]:invalid + .error-message { display: block; }
MDN documentation about :invalid
Here you go...
body {font-size: 15px; font-family: serif;}
input {
background: transparent;
border-radius: 0px;
border: 1px solid black;
padding: 5px;
box-shadow: none!important;
font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
opacity: 0;
position: absolute;
pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
display: block;
border: 1px solid black;
border-left: 0;
padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}
<form>
<div>
<label for="name">Name (optional)</label>
<input id="name" type="text" name="name">
</div>
<label>Gender</label>
<div class="checkboxes">
<label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
<label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
<label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>
Although I like the minimalistic approach of using native HTML5 validation, you might want to replace it with Javascript validation on the long run. Javascript validation gives you far more control over the validation process and it allows you to set real classes (instead of pseudo classes) to improve the styling of the (in)valid fields. This native HTML5 validation can be your fall-back in case of broken (or lack of) Javascript. You can find an example of that here, along with some other suggestions on how to make Better forms, inspired by Andrew Cole.
My html:
<div class="product-addon product-addon-extra-tip">
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
<label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2">2</label>
</p>
<p class="form-row form-row-wide addon-wrap-2004-extra-donation-to-trafficking-survivors-0-1">
<label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="5">5</label>
</p>
</div>
I'm trying to style these radio inputs to look like buttons, and I'm almost there. The problem is that given the current construct (which I can't directly change), I can't figure out how to make the :checked option look different than the rest.
You can see in the jsfiddle where I'm falling short. Is this possible?
http://jsfiddle.net/2gdotu21/1/
Via CSS, input set in front of label and correct attribute used, you can apply a different style if input is :checked or not.
See: https://www.w3.org/wiki/HTML/Elements/label & further more https://www.w3.org/TR/WCAG20-TECHS/H44.html
label {/* button unchecked add your style*/
color:red
}
label:before {/* button checked add your style*/
content:'$';
font-size:1rem;
}
input:checked + label {
color:green;
}
[type=radio]{ /* hide it ? use any methode but display:none; */
position:absolute;
right:200%;
}
<input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2" id="addon-2004-extra-tip-0[]" />
<label for="addon-2004-extra-tip-0[]">2</label>
<input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2" id="addon-2004-extra-tip-0[1]" />
<label for="addon-2004-extra-tip-0[1]">300</label>
<input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2" id="addon-2004-extra-tip-0[2]" />
<label for="addon-2004-extra-tip-0[2]">14</label>
<!-- same name to allow only one checked in this demo -->
else with your structure, integrate the radio within the design of the button http://codepen.io/gc-nomade/pen/LketK (oldish glassy button)
example of your code to change bg color
.product-addon-extra-tip label {
float: left;
width: auto;
min-width: 60px;
margin: 3px;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
color: black;
font-size: 1.2rem;
text-align: center;
padding: 5px 0;
display: block;
line-height: 1.3rem;
}
.product-addon-extra-tip label input {}
.product-addon-extra-tip label:before {
content: '$';
}
label {
position: relative;
}
input {
position: absolute;
top: -15px;
z-index: -1;
box-shadow: 0 0 0 200px tomato;
}
input:checked {
box-shadow: 0 0 0 200px green;
}
<div class="product-addon product-addon-extra-tip">
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
<label><input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="0" data-price="" value="2"> 2 </label>
</p>
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-1">
<label><input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="0" data-price="" value="5"> 5 </label>
</p>
</div>
I'm editing someone other's code, there's an existing form and css file, what I did is that I added 5 "select" tags into the form, and I want to make the selects inline.
Each select has a label, so I put them two in a div, thus I have 5 divs.
I want to put the first 3 div in one row, and last 2 in another row.
I was working on the css file for hours to get things work, but still failed.
The problem I'm getting now is that I cannot put the s in the same line, each of them occupies a separate line, so I have 5 rows in the form now... but I just need 2 rows.
Please help me on that, not quite familiar with CSS.
<html>
<link rel="stylesheet" href="css/mrbs.css.php" type="text/css">
<link rel="stylesheet" media="print" href="css/mrbs-print.css.php" type="text/css">
<form id="add_room" class="form_admin" action="addsystem.php" method="post">
<fieldset>
<legend>Add System</legend>
<div id="sdw-div" style="white-space:nowrap; display:inline">
<label for = "sdw">sdw:</label>
<select id="sdw" name="sdw" style="display:inline">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div id="etl-div" style="white-space:nowrap; display:inline">
<label for = "etl">etl:</label>
<select id="etl" style="display:inline" name = "etl">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div id="hdm-div" style="white-space:nowrap; display:inline">
<label for = "hdm">hdm:</label>
<select id="hdm" style="display:inline" name = "hdm">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div><strong>
.........other two are just the same....
</form>
</html></strong>
and here is the css file for form_admin
form.form_admin {float: left; clear: left; margin: 2em 0 0 0}
.form_admin fieldset {float: left; width: auto; border: 1px solid <?php echo $admin_table_border_color ?>; padding: 1em}
.form_admin legend {font-size: small}
.form_admin div {float:left; clear:left;}
.form_admin label {
display: block; float: left; clear: left;
width: <?php echo $admin_form_label_width ?>em; min-height: 2.0em; text-align: right;
}
.form_admin input {
display: block; float: left; clear: right;
</strong> width: <?php echo $admin_form_input_width ?>em;
margin-top: -0.2em; margin-left: <?php echo $admin_form_gap ?>em;
font-family: <?php echo $standard_font_family ?>; font-size: small;
}
.form_admin select {
display: block; float: left; clear:right; margin-left: 1.0em;
}
.form_admin input.submit {
width: auto; margin-top: 1.2em; margin-left: <?php echo number_format(($admin_form_gap + $admin_form_label_width), 1, '.', '')?>em
}
Give div a float:left; css that will display them as inline.
Also remove <strong> from end of html tag.
Demo
try :
display:inline-block
i find it works better than elseware options
your divs are already display:inline, besides , you also have float:left-ed them.
still if they don't appear in the same line,then there is just one thing, your parent container doesn't have proper width to accommodate all the divs in same line.
so give appropriate width to your parent container
see this fiddle. everything's working!
Add style float:left for all five div. Also add a
<div style="clear:all"></div>
after third div. Also needed a parent container with proper width;
I am having trouble styling a form. The section labelled destination group I cannot get it to align vertically. See screenshot below. I have added color borders to help with debugging of the css.
I have created a js fiddle for this
http://jsfiddle.net/uuNTC/
Below is a stripped down version of the code
HTML
<ul id="ulFilterList">
<li>
<div class="filterLabel" id="labelDates">Dates</div>
<input type="text" value="03/09/2012" name="dateFrom" id="dateFrom" class="dateInputs">
<input type="text" value="09/09/2012" name="dateTo" id="dateTo" class="dateInputs">
</li>
<li>
<div class="filterLabel" id="labelOnRequest">Include "On Request" With:</div>
<select name="onRequest" id="onRequest">
<option selected="selected" value="1">Stop Sell</option>
<option value="2">Available</option>
</select>
</li>
<li>
<div class="filterLabel" id="labelDestinationGroups">Destination Group:</div>
<select size="10" multiple="multiple" name="destinationGroups[]" id="destinationGroups">
<option value="Tunisia All">Tunisia All</option>
<option value="Turkey All">Turkey All</option>
<option value="Turkey PNR">Turkey PNR</option>
<option value="UAE Abu Dhabi ">UAE Abu Dhabi </option>
<option value="UAE All Dubai">UAE All Dubai</option>
<option value="VIE">VIE</option>
<option value="VIE">MORE</option>
<option value="VIE">MORE</option>
<option value="VIE">MORE</option>
<option value="VIE">MORE</option>
<option value="VIE">MORE</option>
<option value="VIE">MORE</option>
</select>
</li>
</ul>
the css
ul#ulFilterList,
ul#ulFilterList li { margin: 0px; padding: 0px }
.dateInputs { margin:0px; text-align:left; width: 50px; display: inline-block; }
#ulFilterList { width: 100% }
ul#ulFilterList li
{
list-style:none;
margin-bottom: 5px;
border: solid 1px blue;
}
.filterLabel {
font-weight: normal;
width: 29%;
display: inline-block;
text-align:right;
height: 100%;
font-size: 11px ;
margin-top: auto
}
One of the benefits of using display: inline-block; is that you can specify a vertical-alignment. In this fiddle I've set the vertical-alignment for the .filterLabel elements to vertical-align: top;. On the down-side, you'll need to return to the default vertical-align: baseline; for labels that are next to single-line inputs (the "Dates" and "Include 'On Request' With" labels), or style the corresponding INPUT elements upwards a bit.