I want to add an "€" symbol on the right of the input field, I saw some examples online but sadly they dont work because I already have a label for my input. Is there a way to do it with the label already in use?
Heres the HTML code:
<div class="inputfield">
<label> Example </label>
<input id="idExample" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required>
</div>
and in case you want to see what CSS I have:
.inputfield input {
border-radius: 10px;
width: 100px;
margin-left: 100px;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
}
I would use a pseudo-element, mostly because you then can set a data-attribute with javascript, if you ever going to need to change currency in the future.
Inputs don't have pseudo-elements, so I needed to wrap the input in a span. Then I'm able to use position: absolute in combination with transform: translate to put the € where I wanted it.
.inputfield input {
border-radius: 10px;
width: 100px;
margin-left: 100px;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
}
.inputfield span {
position: relative;
}
.inputfield span[data-currency]::after {
position: absolute;
content: attr(data-currency);
right: 1em;
top: 50%;
transform: translate(-100%, -50%);
}
<div class="inputfield">
<label> Example </label>
<span data-currency="€"><input id="idExample" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required></span>
</div>
please see if the following works for you...
HTML
<div class="inputfield">
<label> Example </label>
<input id="idExample" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required>
<span class="currency">€</span>
CSS
<style>
.inputfield input {
border-radius: 10px;
width: 100px;
margin-left: 100px;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
}
.currency {
position: relative;
left: -20px
}
Play around with the left value on the currency style to get your desired position.
The quickest and simplest way is just adding a currency sign before/after your input tag like:
<input id="idExample" class="currency" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required>€
if you need to style the currency sign you can place it in a span tag:
<input id="idExample" class="currency" type="number" name="input" placeholder="0.00" pattern="[0-9]+" required><span class="euroClass">€</span>
Try this out:
<input placeholder="Type something">
<span>₠</span>
Related
How to add small letter (sub) under a word in html and css?
I am attaching the screenshot.
Want to write "Max 100, Min 1 just like the picture below.
my code is here:
<input type="text" class="textarea" alt="" value="" style="color: #1c91df; height: 50px; width: 100%; margin-top: 0px; margin-bottom: 0px; border-color: #1c91df; box-shadow: none; border-width: 1px;">
<input type="number" class="textarea" alt="height" value="10" style="color:#30a2ee;"/> Height <sub>Max 100</sub> <sub>Min 1</sub>
<input type="number" class="textarea1" alt="depth" value="10" style="color:#30a2ee;"/> Depth <sub>Max 100</sub> <sub>Min 1</sub>
I hope this is what you're looking for. : )
I am attaching a screenshot of it.
Here's the code.
<div class="demention">
<input type="number" class="textarea" alt="height" value="10" style="color:#30a2ee;"/>
<p class="big_text">Height</p>
<input type="number" class="textarea" alt="depth" value="100" style="color:#30a2ee;"/>
<p class="big_text">Depth</p>
</div>
<style>
.demention {
display: flex;
flex-direction: row;
align-content: center;
min-height: 50px;
}
.demention .textarea {
margin-right: 10px;
padding: 10px;
width: 100px;
border: 1px solid #30a2ee;
}
.demention .big_text {
position: relative;
padding-right: 30px;
color: #30a2ee;
}
p.big_text:before {
content: "Max. 100";
position: absolute;
left: 0;
top: 25px;
opacity: 0.5;
}
p.big_text:after {
content: "Min. 1";
position: absolute;
left: 0;
top: 40px;
opacity: 0.5;
}
</style>
sub {
text-transform: lowercase;
}
There are 5 different values you can use:
**lowercase**: makes all of the letters in the selected text lowercase
**uppercase**: makes all of the letters in the selected text uppercase or ALL CAPS
**capitalize**: capitalizes the first letter of each word in the selected text
none: leaves the text's case and capitalization exactly as it was entered
**inherit**: gives the text the case and capitalization of its parent
**full-width**: This is a keyword forcing the writing of a character (mainly ideograms and Latin scripts) inside a square.
There are million of ways to do that. For example you can use flex:
<div class="mygroup">
<input type="number" class="textarea" alt="height" value="10" style="color:#30a2ee;"/>
<div class="mystyle">
<span>Height</span>
<sub>Max 100</sub>
<sub>Min 1</sub>
</div>
<input type="number" class="textarea1" alt="width" value="10" style="color:#30a2ee;"/>
<div class="mystyle">
<span>Width</span>
<sub>Max 100</sub>
<sub>Min 1</sub>
</div>
</div>
And this css:
.mygroup {
display: flex;
}
.mystyle {
display: flex;
flex-direction: column;
}
Please add this custom css inside your css file and check again.
sub {
text-transform: lowercase;
}
I'm new to CSS and I wanted to add some margin-right to the placeholder of an input:
<div class="input-group">
<input type="text" class="form-control search-engine" placeholder="Search this blog">
</div>
And this was my try on setting margin-right:
.search-engine ::placeholder{
margin-right:5px !important;
padding-right:5px !important;
}
But it didn't make any changes somehow!
So how to properly make changes and style the placeholder of an input in CSS?
Remove Padding or Margin From "Placeholder". and add in the input tag. like this
.input-group input{
padding:10px 20px;
}
.search-engine::placeholder{
}
<div class="input-group">
<input type="text" class="form-control search-engine" placeholder="Search this blog">
</div>
you can't do it. Your structure should be like this:
<label>
<input type="text" class="form-control">
<span class="placeholder">Search this blog</span>
</label>
then you can process your label text:
label {
padding: 10px;
position: relative;
}
.placeholder {
position: absolute;
left: 0;
top: 0;
}
Try this:
.form-control::placeholder{
padding-left: 5px;
}
.form-control::placeholder{
padding-left: 15px;
}
<div class="input-group">
<input type="text" class="form-control search-engine" placeholder="Search this blog">
</div>
I'm creating a form and I have several input boxes on the same line.
I'd like to have the email input to take one line. The date, time, and number inputs to take another line. However, I'm not sure how to get the date/time/number inputs to span exactly 100% of the width of the form.
The percentages I have now in the CSS are estimates, so the edge of the number box doesn't vertically align with the email input box.
input[type=email] {
width: 100%;
}
input[type=date] {
width: 22%;
margin-right: 15px;
}
input[type=time] {
margin-right: 15px;
}
input[type=number] {
width: 11.4%
}
<form>
Email: <input type="email"><br>
Date: <input type="date">
Time: <input type="time">
Number in Party: <input type="number">
</form>
I would do it using flex, Here's a working example
I wrapped each line on a div, like this:
<form>
<div>Email: <input type="email"></div>
<div>
<div>Date: <input type="date"></div>
<div>Time: <input type="time"></div>
<div>Number in Party: <input type="number"></div>
</div>
</form>
css
form{
display: flex;
flex-direction: column;
}
form>div{
display: flex;
}
form>div input{
flex-grow: 1;
}
form>div>div{
display: flex;
flex-grow: 1;
}
You can use <label> to give yourself some explicit control the width, padding & margin of the form field labels.
Example:
label, input {
display: inline-block;
height: 24px;
line-height: 24px;
}
label {
width: 18%;
margin: 6px 0;
padding: 3px 0 3px 3px;
background-color: rgb(227,227,227);
}
input {
width: 80%;
}
input:nth-of-type(n+2) {
width: 13%;
}
<form>
<label for="email">Email:</label><input type="email" name="email" id="email"><br />
<label for="date">Date:</label><input type="date" name="date" id="date">
<label for="time">Time:</label><input type="time" name="time" id="time">
<label for="number">Number in Party:</label><input type="number" name="number" id="number">
</form>
input[type=email] {
width: 100%;
}
input[type=date] {
width: 21%;
}
input[type=time] {
width: 21%;
margin-right:42px;
}
input[type=number] {
width: 20.9%;
}
<form>
Email: <input type="email"><br><br>
Date : <input type="date">
Time : <input type="time">
Number in Party : <input type="number">
</form>
I am trying to put distance between two inputs, this is what it looks like now: http://i.imgur.com/Et6siwO.png. My code:
<form class="popup-form" id="login-popup-form">
<label>Your username/email:</label> <input class="popup-input" id="login-popup-username-field" name="username" placeholder="Username"/><br />
<label>Your password:</label> <input class="popup-input" id="login-popup-password-field" name="password" placeholder="Password"/>
</form>
I tried this in CSS:
#popup-wrapper .popup-input
{
position:absolute;
right: 20px;
width: 200px;
margin-bottom:20px;
}
FIDDLE
This should do:
margin-top: 15px;
Also you can use margin-bottom, margin-left and margin-right.
Or you could do:
.form-group {
.input-class {
padding: 5px;
}
}
I've been following tutorial on styling checkboxes using only CSS3 and here's what I came up with:
DEMO:
http://cssdeck.com/labs/jaoe0azx
Checkboxes are styled just fine - but when I tab through form controls -> checkbox is being skipped. Any advice why?
HTML:
<form role="form" id="login_form" data-mode="login">
<div class="form-group">
<label for="ue">Username or email:</label>
<input type="email" class="form-control input-lg" name="ue" id="ue" placeholder="" />
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control input-lg" name="password" id="password" placeholder="" />
</div>
<div>
<input id="rememberme" type="checkbox" name="rememberme" value="1" class="checkbox_1" tabindex="0" />
<label for="rememberme" class="checkbox_1" tabindex="0">remember me</label>
</div>
<div id="auth_area_login_button">
<button class = "btn btn-lg btn-primary">
Login
</button>
</div>
</form>
CSS:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');
#login_form{padding:20px;}
label.checkbox_1 {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin: 0px;
}
label.checkbox_1:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 0px;
}
label.checkbox_1:hover:before{border-color:#66afe9;}
input[type=checkbox].checkbox_1 {
display: none;
}
input[type=checkbox].checkbox_1:checked + label.checkbox_1:before {
content: "\2713";
font-size: 15px;
color: #A0A0A0;
text-align: center;
line-height: 15px;
}
EDIT 1:
seems to work in firefox, but not in chrome...
Input must be accessible to receive focus. It works in chrome/chromium if you add following lines.
input[type=checkbox].checkbox_1 {
opacity: 0;
}
input[type=checkbox].checkbox_1:focus + label.checkbox_1:before {
border: 1px solid #66afe9;
}
Since the real checkbox is hide with display:none you can't focus it but you can also don't hide the element just make it be under the :before of the label:
input[type=checkbox].checkbox_1 {
position: absolute;
width: 16px;
height: 16px;
margin: 0;
border: 1px solid transparent;
margin-top: 3px;
}
Check this http://cssdeck.com/labs/pl4ljry7
Tested in Chrome
Because, it is not a checkbox.
Look at the css:
input[type=checkbox].checkbox_1 {
display: none;
}
The checkbox is actually hidden. So, you will not be able to focus it. The stylized square and checkmark shown are through the :before pseudo element on label. Pseudo-elements can't be focused. Nor can the labels.
I know this is an old question, but I came up with a Jquery solution when the CSS solution didn't work for me, and thought others might find this helpful. I wrapped the input in a div with the desired tabindex value and the class "checkbox-add-tabindex". Then, using Jquery, I transferred the tabindex from the div to the input.
HTML:
<div class="checkbox-add-tabindex" tabindex="10">
<input id="rememberme" type="checkbox" name="rememberme" value="1" class="checkbox_1" tabindex="0" />
<label for="rememberme" class="checkbox_1" tabindex="0">remember me</label>
</div>
Jquery:
$(".checkbox-add-tabindex").focus(
function () {
var tabval = $(this).prop("tabindex");
$(this).removeAttr("tabindex");
$(this).children(":first").attr("tabindex", tabval);
$(this).children(":first").focus();
})