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>
Related
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>
I am trying to create a <form> as part of a project, which has text inputs with a label before them. I am trying to put the <label> and the <input> on the same line, aligned to the right side like this example project:
Here is the code I have attempted to use:
.labelrow {
text-align: right;
vertical-align: top;
}
.inputrow {
display: inline-block;
text-align: left;
vertical-align: top;
}
<form id="survey-form">
<div class="labelrow">
<label id="name" for="name">* Name:</label></div>
<div class="inputrow">
<input type="text" id="name" class="input-field" required placeholder="Enter your name"></div>
<div class="labelrow">
<label id="email" for="email">* Email:</label>
</div>
<div class="inputrow">
<input type="email" id="name" class="input-field" required placeholder="Enter your email">
</div>
</form>
This code gives me the result of this:
The <label> are aligned correctly, but the <input> are on the other line. What can I fix to get both on the same line and aligned to the right like the example?
Solution
House both label and input into a single div
Add display: flex to the parent so you can have more flexibility styling your fields on small screens. For example, you could move the label above the input on small screens when viewport space is limited using flex-direction: column
labels typically don't have ids. Instead, they point to form elements containing ids. I've fixed your labels in the following code
Duplicate ids are a no-no as well (also fixed)
.row {
display: flex;
align-items: center;
justify-content: flex-end;
}
.input-field {
margin-left: 1em;
padding: .5em;
margin-bottom: .5em;
}
<form id="survey-form">
<div class="row">
<label for="name">* Name:</label>
<input type="text" id="name" class="input-field" required placeholder="Enter your name">
</div>
<div class="row">
<label for="email">* Email:</label>
<input type="email" id="email" class="input-field" required placeholder="Enter your email">
</div>
</form>
By enclosing both elements into the same "div" you can align them together in a row.
<form id="survey-form">
<div class="inputrow">
<label id="name" for="name">* Name:</label>
<input type="text" id="name" class="input-field" required placeholder="Enter your name">
</div>
<div class="inputrow">
<label id="email" for="email">* Email:</label>
<input type="email" id="name" class="input-field" required placeholder="Enter your email">
</div>
</form>
By default, "div" tags always place a line break before and after they're inserted.
Potentially the simplest option is to put the input inside the label. Make the label a block item with text align right.
label {
display:block;
text-align:right;
margin: 5px;
}
<form id="survey-form">
<label id="name" for="name">* Name: <input type="text" id="name" class="input-field" required placeholder="Enter your name"></label>
<label id="email" for="email">* Email: <input type="email" id="name" class="input-field" required placeholder="Enter your email"></label>
</form>
Remove the <div>s and add a <br> after each <input>. Add the following to both <label> and <input>:
display: inline-block;
height: 1.2rem;
line-height: 1.2rem;
vertical-align: middle;
height and line-height can be adjusted but keep them equal to each other. Set <form> width to 100vw and of course text-align: right on <label>s. Place the <label>s and <input>s into a <fieldset> and assign the following to the <fieldset>
width: 50vw;
margin-left: 40vw;
border: 0px none transparent
BTW the <label>s have a duplicate #id which is invalid, therefore removed.
Demo
html,
body {
width: 100%;
height: 100%;
font: 400 16px/1.2 Raleway;
background: #FBFBFB;
}
form {
width: 70vw;
}
fieldset {
width: 50vw;
text-align: right;
margin-left: 20vw;
border: 0px none transparent;
background: none;
}
legend {
width: 70vw;
text-align:center;
margin: 0 auto;
}
label,
input,
button {
display: inline-block;
height: 1.2rem;
line-height: 1.2rem;
vertical-align: middle;
padding-left: 5px;
margin-top: 15px;
font: inherit;
}
input {
width: 60%;
max-width: 300px;
border-radius: 4px;
}
label {
width: 30%;
text-align: right;
}
button {
height: 1.5rem;
padding: 0 5px;
margin: 0 0 0 auto;
float: right;
cursor:pointer;
}
sup {
display:inline-block;
width: 25%;
margin-left: 70%;
margin-top: 10px;
text-align: right;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<form id="survey-form">
<fieldset>
<legend>Let us know how we can improve freeCodeCamp</legend>
<label for="name">* Name:</label>
<input id="name" type="text" placeholder="Enter your name" required><br>
<label for="email">* Email:</label>
<input id="email" type="email" placeholder="Enter your email" required><br>
<label for="age">* Age:</label>
<input id="age" type="number" placeholder="Enter your age" min='18' max='120' required><br>
<sup>* Required</sup>
<button type='submit'>Submit</button>
</fieldset>
</form>
When you wrap each in their own div you get the stacking that you are seeing. Put both the label and the input into a single div.
I have a simple HTML form with some validations but the text labels get misplaced when the form appears.
This is the form before (PLEASE NOTE: The red square around it is not part of the form, I just placed it with Paint to help you see the problem quick):
And after:
Any hint to keep the label aligned with the text field please?
UPDATE:
This is the code:
<form name="senstageaddform">
<div class="form-element">
<label for="ed_senStartDate" class="text-label">
{{i18n "EDUCATION_SEN_START_DATE"}} <span class="required">*</span>
</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senStartDate" name="startDate"/>
</div>
<div class="form-element">
<label for="ed_senEndDate" class="text-label">{{i18n "EDUCATION_SEN_END_DATE"}}</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senEndDate" name="endDate"/>
</div>
</form>
Here is the CSS:
.form-element {
display: inline-block; margin: 5px; width: 98%; clear: both; vertical-align:top
.text-label {
width: 20%; text-align: right; display: inline-block; padding: 3px 5px 0px 1px;
}
.standard-text-field {
width: 10em;
}
How can I get my boxes to align with my text?
I have also copy and pasted the html/css code in jsFiddle!
http://jsfiddle.net/EFByC/51/
<form
action="http://www.sblogger/cgi-bin/subcomments"
method="post" >
<fieldset name="commentFS" id="commentFS">
<label for="username">Username</label>
<input name="username" id="username" title="Supply your username" required="required"/>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" title="Supply a valid e-mail address" required="required"/>
<label for="password">Password</label>
<input name="password" id="password" type="password" title="You must provide your password" required="required"/>
<label for="commentbox">Comment<br />
(500 character limit)</label>
<textarea maxlength="500" name="commentbox" id="commentbox"></textarea>
<input type="submit" value="Submit Comment"/>
</fieldset>
</form>
here you go, edited your Fiddle
It comes down to this:
If you float left & right, you need a wrapper to preserve the room for the floats.
so i added this:
p {
overflow: hidden;/*this should be clearfix, just for demo it is overflow fix*/
}
label{
display: block;
float: left;
font-size: 0.9em;
width: 20%;/* was 100%*/
margin-top: 5px;
margin-bottom: 5px;
/*clear: left*/
}
and the wrapper:
<p>
<label for="username">Username</label>
<input name="username" id="username" title="Supply your username" required="required">
</p>
i see you use float, display and width:100%; , you definitly have too much unnedeed rules here .
inline-block + width, can do it and allow you to vertiacal-align labels and inputs,
float+clear can work too, but vertical-align will not be avalaible :
example with inline-block:
/*Field set styles */
fieldset {
background-color: rgb(245,245,255);
margin: 15px auto;
padding: 5px;
width: 90%;
}
/* Label Styles */
label{
display: inline-block;
font-size: 0.9em;
margin-top: 5px;
margin-bottom: 5px;
width:35%;
}
/*Input control styles */
input, textarea {
font-size: 0.9em;
margin-left: 10px;
margin-right: 10px;
width: 55%;
vertical-align:middle;
}
/*Text area styles */
textarea {
height: 150px;
}
http://jsfiddle.net/EFByC/58/
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();
})