I would like to have a html5 number input field containing the EUR sign, and no matter what editing occurs to the field, for the sign to be persistent. I tried to do that but the EURO sign is in beginning , I want to move this sign in the end of the input but for some reasons i can't do it? Any help? Result
My html code:
<span class="input-symbol-euro">
<input type="number" value="0" min="0" step="1" />
</span>
Css code:
.input-symbol-euro {
position: relative;
}
.input-symbol-euro input {
padding-right:18px;
}
.input-symbol-euro:before {
position: absolute;
top: 0;
content:"€";
left: 5px;
}
Here is jsfiddle : DEMO
Why not set right instead of left:
.input-symbol-euro:after {
position: absolute;
top: 0;
content:"€";
right: 18px;
}
See this jsfiddle. Adjust the value as necessary depending on how far you want it from the end, and set it to a negative value if you want it outside the input.
As you're positioning the element absolutely, after and before make no difference, although it would be more semantically correct to use after.
You need to set right instead of left. Which place the content based on the right side of input
.input-symbol-euro {
position: relative;
}
.input-symbol-euro input {
padding-right: 18px;
}
.input-symbol-euro:after {
position: absolute;
top: 0;
content: "€";
right: 5px;
}
<span class="input-symbol-euro">
<input type="number" value="0" min="0" step="1" />
</span>
Use the :after pseudo class, and position the content from the right side of the box:
.input-symbol-euro {
position: relative;
}
.input-symbol-euro input {
padding-right: 18px;
}
.input-symbol-euro:after {
position: absolute;
top: 0;
content: "€";
right: 5px;
}
<span class="input-symbol-euro">
<input type="number" value="0" min="0" step="1" />
</span>
Related
So I'm making a fill in the blank with text in between (See my previous question), now I have a problem where I evenly spaced the text in-between with margin-left and margin-right however if I put let's say 1 instead of 0 it looks like 1 : and with 0 it's normal 0: but since 1 is fewer pixels it doesn't look very good, I could always just leave it like that and hope nobody notices but I'd like to probably make it as clean looking as possible.
See for yourself here
If not here's the code,
.text1 {
display: inline-block;
font-size: 4vmin;
margin-right: -22px;
margin-left: -4px;
user-select: none;
text-align: right;
}
.fill-out {
outline: none;
border: 0;
margin-left: 18px;
display: inline-block;
}
#box1 {
width: 13px;
}
#box2 {
width: 13px;
}
#box3 {
width: 21px;
}
<div>
<input class="fill-out" id="box1" type="text" placeholder="00" maxlength="2" />
<span class="text1">:</span>
<input class="fill-out" id="box2" type="text" placeholder="00" maxlength="2" />
<span class="text1">.</span>
<input class="fill-out" id="box3" type="text" placeholder="000" maxlength="3" />
</div>
```
Type in only 2's then run again and type in 1's
Try using monospaced fonts.
because i don't think you will have the result you want with the default font.
see on wikipedia the difference wiki.
I'm attempting to replicate the experience from the Shopify checkout in my WooCommerce checkout page by animating the labels when the user focuses on a certain input, just like this:
I've tried using input:focus ~ label, but it won't work because the default WooCommerce input is inside a span (.woocommerce-input-wrapper) like this:
<!-- The basic markup for each input -->
<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10">
<label for="billing_first_name" class="">Nombre <abbr class="required" title="obligatorio">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="" autocomplete="given-name">
</span>
</p>
<!-- CSS -->
<style>
.woocommerce-billing-fields__field-wrapper .form-row{
position: relative;
}
.woocommerce-billing-fields__field-wrapper .form-row label{
position: absolute;
top: 11px;
left: 11px;
padding: 0;
color: #808080;
transition: .35s;
}
.woocommerce-billing-fields__field-wrapper .form-row input:focus ~ label{
top: -8px;
font-size: 12px;
font-weight: 500;
}
</style>
Thanks!
I hope you find these codes useful
my css:
label {}
.woocommerce form .form-row label {
position: absolute;
left: 10px;
top: 15px;
}
.woocommerce form .form-row {
position: relative;
}
label.floatlabel {
top: -30px !important;
}
mu jQuery :
jQuery('.woocommerce form .form-row input').click(function(){
var label = jQuery("label[for='" + jQuery(this).attr('id') + "']");
if(jQuery('floatlabel').length ){
jQuery('label.floatlabel').removeClass('floatlabel');
}
jQuery(label).addClass('floatlabel');
})
The major issue with woocommerce checkout inputs is that labels are before inputs. For floating labels to work you need to place the labels after the inputs then it is all easy. (You can use any css method here: https://css-tricks.com/float-labels-css/).
I have tried finding a way to revert these elements in html but without success. I also tried using flexbox in css along with column-reverse but the animation didn't seem to work.
Basically the answer we are searching for is to the question: How to place labels after inputs in woocommerce checkout?
#Morteza Barati's answer could be good but it doesn't work properly. If inputs are autofilled then the label sits on top of them + once label moves up in case field is erased it won't come back down.
As already mentioned: There is no standardized way to change the input-label position on text input.
Off-topic: The design pattern in your screenshot comes from Googles material design (at least that's where it's commonly used and seen today). You can find more about that pattern here: https://material.io/components/text-fields
Solution with JS and CSS
You need some CSS and JS code to implement that design pattern. There are four different states you need to cover:
When a field receives the text-focus: Move the label up.
When a field loses focus and has no content: Move the label down.
When a field loses focus and has content: Leave the label up.
When a field has a value on page load: Move the label up.
Here's a short demo - the important part is the JS code which adds CSS classes to the field container on focus, blur and input.
jQuery('.form-row :input').each(function() {
var $input = jQuery(this);
var $row = $input.closest('.form-row');
// Is the field filled on page load?
if ($input.val()) {
$row.addClass('-filled');
}
// Enter or leave the "focus" state.
$input.on('focus', function() {
$row.addClass('-focus');
});
$input.on('blur', function() {
$row.removeClass('-focus');
});
// When the fields input value changes, add or remove the "-filled" state
$input.on('input', function() {
if ($input.val()) {
$row.addClass('-filled');
} else {
$row.removeClass('-filled');
}
});
})
.form-row {
position: relative;
padding-top: 20px; /* top padding adds space for the label */
margin: 10px 0;
}
.form-row label {
position: absolute;
top: 20px; /* initially, the label is down */
left: 0;
color: #aaa;
transition: all 0.3s;
}
/* Give both the label and input field the same padding/box-size */
.form-row input,
.form-row label {
font-size: 16px;
line-height: 22px;
padding: 8px 12px;
margin: 0;
}
/* When the field is focused or filled, move the label up */
.form-row.-focus label,
.form-row.-filled label {
color: #6200ee;
font-size: 12px;
top: 0;
padding: 0;
line-height: 20px; /* Set the line height to the top-padding */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woocommerce-billing-fields__field-wrapper">
<p class="form-row">
<label for="field1">
Field 1 <abbr class="required">*</abbr>
</label>
<span class="woocommerce-input-wrapper">
<input type="text" id="field1">
</span>
</p>
<p class="form-row">
<label for="field2">
FIeld 2 <abbr class="required">*</abbr>
</label>
<span class="woocommerce-input-wrapper">
<input type="text" id="field2" value="Initial Value">
</span>
</p>
</div>
Pure CSS
TL;DR; this is not possible in WooCommerce out-of-the-box.
Note: A pure CSS solution is also possible when your comes after the field and could look like the below sample.
It works by using the input fields "placeholder" as the initial caption. The CSS selector :not(:placeholder-shown) matches every text field that has a value. The CSS selector :focus handles the input fields focus state.
However, this is just a sample and is not possible in WooCommerce without writing custom cart and checkout templates to produce the correct HTML elements.
.form-row {
position: relative;
padding-top: 20px;
margin: 10px 0;
}
.form-row label {
position: absolute;
color: #6200ee;
font-size: 12px;
top: 0;
left: 0;
padding: 0;
line-height: 20px;
opacity: 0;
transition: all 0.3s;
}
.form-row input {
font-size: 16px;
line-height: 22px;
padding: 8px 12px;
margin: 0;
}
/* Here's the logic: */
.form-row input:focus::placeholder {
opacity: 0;
}
.form-row input:focus + label,
.form-row input:not(:placeholder-shown) + label {
opacity: 1;
}
<p class="form-row">
<input type="text" id="field1" placeholder="My Field">
<label for="field1">
My Field
</label>
</p>
I have some style:
input::before {
content: attr(min);
}
and some html:
<input type="range">
The input element has no max attribute and the content will be nothing.
Can I set the specific value that will be the content if the attribute isn't available, or can I get the minimum value of the slider??
( Only CSS Please )
Thanks...
You could do it with a bit of CSS trickery. First, you'd set both the ::before and ::after pseudo elements to have an initial content: "0";. Then position them in the same place, with a background color. This means they'll overlap. After this, set the content of ::after to attr(min). If there is a min attribute, the ::after element will have width and hide the ::before.
input[type="range"] {
position: relative;
}
input[type="range"]:after,
input[type="range"]:before {
content: '0';
display: block;
position: absolute;
left: 0;
top: 20px;
background: white;
}
input[type="range"]:after {
content: attr(min);
}
<input type="range" min="20" max="100" />
<input type="range" max="100" />
Try this CSS:
input::before {
content: attr(min, integer, 0);
}
Or:
input::before {
content: attr(min, number, 0);
}
Replace the 0 with the number you want.
Simply give the content property of the pseudo-element(s) a default value of "0" and then overwrite the value(s) for inputs with the relevant attribute(s) present.
Here's a very quick example:
*{color:#000;font-family:arial,sans serif;}
[type=range]::before,
[type=range]::after{
content:"0";
}
[type=range][min]::before{
content:attr(min);
}
[type=range][max]::after{
content:attr(max);
}
<input type="range">
<input max="5" min="1" type="range">
In an overlapping like the one below, how to prevent the large space between the title and text field?
.icon-link-mail {
position: relative;
left: 485px;
top: 29px;
padding: 8px 8px 7px 8px;
z-index: 2
}
<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
<label for="sendto">
<i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i>
<input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
</label>
</form>
Result can be seen in this fiddle
Personally I'd just use a pseudo-element, but if you wish to use the <i> icon, then we can do that a lot better by using position:absolute instead of position:relative. Adding position:relative just moves the icon, but leaves the space that it would have taken. position:absolute won't leave that space.
We need to make sure to set the parent contain (label) to position:relative though, so that the icon will be absolutely positioned in relation to the parent instead of the entire page.
#mail_form label {
position: relative;
}
.icon-link-mail {
position: absolute;
z-index: 2;
right: 0;
}
<h3>Title</h3>
<form name="mail_form" id="mail_form" method="POST" action="">
<label for="sendto">
<i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i>
<input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." />
</label>
</form>
Result
Fiddle
http://jsfiddle.net/Ay6Hw/4/
I find the best way to do this is to just use an image. Here would be the code:
.search input {
padding-left: 17px;
background: #FFF url("../images/icon_search.png") left no-repeat;
}
.search input:focus {
background:#fff;
}
This will also remove the background image on focus giving the user a better experience overall.
Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.
Create an <input> tag followed by a standard <i> tag with the icon you need.
Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.
(Optional) You can make the icon active, to perhaps submit the data, via standard JS.
See the three code snippets below for the HTML / CSS / JS.
Or the same in JSFiddle here:
Example: http://jsfiddle.net/ethanpil/ws1g27y3/
$('#filtersubmit').click(function() {
alert('Searching for ' + $('#filter').val());
});
#filtersubmit {
position: relative;
z-index: 1;
left: -25px;
top: 1px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>
I have three text inputs (2 input text, 1 textarea) and a submit button inside a div with position:relative. The 3 text inputs and a submit button all have position:relative as well. The first 2 inputs (q and d) line up as expected, but the last two (t and qS) lie off to the right and don't follow the expected CSS. I would like all of the textboxes and the submit button to line up under each other the same distance from the left side.
Markup:
<form method='POST' action='ask.php'>
<input type='text' id='q' >
<textarea id='d'></textarea>
<input type='text' id='t'>
<input type='submit' value='submit' id='qS'>
</form>
CSS:
#q{
position: relative;
top: 30px;
left: 20px;
width: 400px;
border: 1px solid orange;
font-size: 13px;
}
#d{
position: relative;
top: 60px;
left: 20px;
height: 100px;
width: 400px;
}
#qS{
position: relative;
top: 20px;
left: 20px;
}
#t{
position: relative;
top: 20px;
left: 100px;
}
Your css is quite messy. To get what you want delete all your CSS and replace your HTML with this...
<form method='POST' action='ask.php'>
<p><input type='text' id='q' ></p>
<p><textarea id='d'></textarea></p>
<p><input type='text' id='t'></p>
<p><input type='submit' value='submit' id='qS'></p>
</form>
For further styling and spacing use CSS. There is no need to set anything to position:relative... and there's no need to use top,left,right either. Simply use margin where needed. If you want to move everything together, set margin to your form element.
By default all elements are positioned relative, and hence you don't need to specify it for every element. If you want to add margins, padding add to the divs and it will do the work for you. Here is an example of the code.
http://jsfiddle.net/cdRzW/
Update: The default position is static and not relative, however, the elements are automatically placed in the HTML flow and in this case relative positioning is not required.