When I make an input button and add a label, the label appears on the side of the input field. How can I make it appear inside the input field?
I have tried to put the label inside the input field with CSS, but when I write in the input, the label and the text overlap, and the text becomes unreadable. How can I make the label disappear when I type in the input field? If you have any other options, please tell me.
<div class="holder">
<label>username</label>
<input type="text">
</div>
.holder {
position: relative;
}
.holder label {
position: absolute;
left: 2px;
top: 2px;
width: 20px;
height: 20px;
}
.holder input {
padding: 2px 2px 2px 25px;
}
<div class="holder">
<label>username</label>
<input type="text" placeholder="username">
</div>
Try this by adding placeholder.
Just use the placeholder attribute for the input tag. Like this:
<input type="text" placeholder="username"/>
In HTML using the input placeholder attribute, show the text inside the input text
example:-
<input type="text" placeholder="username"/>
Related
I want a text field where i can insert text into and when i enter the text there should appear a button on the end of the textfield to clear the text. But I want this with only HTML/Less so without any JS.
As you can see in the code below I used the display: none attribute and i want to change the display: none to display: block after there is text entered in the input field.
code below:
<div class="input-field">
<input name="{{field.name}}" ng-model="field.value" type="text"/>
<button class="icon-assistant8 ci-cancel" type="reset">
</button>
</div>
And this is the relevant Less file:
.icon-assistant8 {
position: absolute;
right: 3px;
top: 5px;
width: 20px;
height: 20px;
display: none;
}
.icon-assistant8:after {
display: block;
}
Edit: After this example https://codepen.io/shidhincr/pen/ICLBD I know it is possible to do it with only HTML and CSS. I want to do that too but I can't get it to work and I do not know why.
Also I know I can do this with JS, I am just courious what i'm doing wrong.
They key parts of the example you've linked to that you haven't implemented in your own solution are
.search-box:not(:valid) ~ .close-icon {
display: none;
}
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
In order for :not(:valid) to match, you need the required attribute on the input. When the input is empty, it's considered not valid.
Here's a basic example
input:not(:valid) ~ button { display: none; }
<input type="text" required>
<button type="button">Foo</button>
I have calendar option to select the date. The calendar icon showing in outside of text-box.
<div class="input-prepend">
<input class="span12" type="text" readonly="readonly" id="date" name="date" placeholder="dd-mm-yyyy" />
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
How to show icon span in inside text-box using CSS?
Thanks
make a box/div looking like input box and put calendar icon to left
and insert a input element without border
input{
border: 0 solid #fff !important;
}
Note: use calendar icon in label so when user click on icon it gets focus to input tag
see the example at go to input box in stay in touch
.input-prepend {
display: inline-block;
position: relative;
}
.add-on {
position: absolute;
right: 5px;
top: 5px;
}
I have the following code:
<input id="firstName" name="fname" type="text" maxlength="50" placeholder="First Name *" required>
How can I color the (*) symbol in the placeholder value red without coloring the other text with it (being First Name text)?
Any help is much appreciated!
Thank you!
Al
One possible option could be using :valid pseudo-class for the required <input> to make the absolutely positioned sibling element disappear — which is used as a placeholder under the input.
So, we can use ::before/::after pseudo-elements over the absolutely positioned element to change the color of our pseudo-placeholder.
.input-wrapper {
display: inline-block;
position: relative;
}
.input-wrapper input {
background: transparent;
border: 1px solid #999;
}
.input-wrapper input:valid + .placeholder {
display: none;
}
.input-wrapper .placeholder {
position: absolute;
top: 1px;
left: 2px;
z-index: -1;
}
.input-wrapper .placeholder::before {
content: attr(data-placeholder);
color: #999;
}
.input-wrapper .placeholder::after {
content: " *";
color: tomato;
}
<div class="input-wrapper">
<input id="firstName" name="fname" type="text" maxlength="50" required>
<span class="placeholder" data-placeholder="First Name"></span>
</div>
It's worth noting that :valid pseudo-class is supported in IE10+.
Unfortunately, it isn't possible to change the color of certain text in a input :( you can try to use a contenteditable div:
<div class="input" contenteditable>First Name <span style="color:red;">*</span></div>
Then, you have to add and remove the placeholder with JS:
$(function(){
$('.input').focus(function(){
$(this).html('');
});
$('.input').blur(function(){
if($(this).html()=='') this.innerHTML='First Name <span style="color:red;">*</span>';
});
});
JSFiddle Demo
You probably can't, like that. The best way to do this would be something like this SO answer: Multiple font colors in an Input tag
In essence, a second div is put over the input field, allowing for the change in colour.
For fun I have taken a piece of code I got from a friend and tried to create a login field with username and password and I am having a hard time get the fields next to the words. There is a big gap between the word username and the box you type in.The same applies for password.
This is my code:
<form method="post" action="https://www.mattepunkten.com/action_login.php">
<input type="hidden" name="error_url" value="http://www."here you write url to webpage one should be directed to when typing wrong login".com">
Username:
<input type="text" name="fld_userid" size="15" style="width: 120px"><br>
Password:
<input type="password" name="fld_password" size="15" style="width: 120px"><br>
<input type="submit" name="cmd_invia" value="Login">
</form>
And my css code is the following.
input {
color: black;
margin: 10px 100px 0px 400px;
}
form {
color: white;
text-align: right;
position: fixed;
margin-top: 30px;
}
I am pretty new at this and would appreciate some tips! Thanks!
Well your margins are huge, try to make them smaller and see how it looks:
input {
color: black;
margin: 10px;
}
The style you are using has the following format:
margin: <top> <right> <down> <left>;
So with 100px right and 400px left they will get very far away :)
To be able to style the text you need it to be an element, so a simple answer would be to wrap it in some tag, but this is a style I personally enjoy, and adds a lot more meaning:
html
<label>
<span>Username:</span>
<input name="fld_userid">
</label>
css
label { display: block; text-align: center; }
input, span { display: block; width: 200px; }
This should stack both the text and the input on top of each other, while keeping them grouped by the label, so when you interact with the text the browser properly focus its related input.
I will add an explanation
margin: 10px 100px 0px 400px;
stands for:
top margin is 10px
right margin is 100px
bottom margin is 0px
left margin is 400px
Have you tried working with labels at all - keeping it semantic, and formatted, plus if you wrap your inputs it'll give it a larger hit area for said fields. In addition - I removed the input margin, removed the forms positioning and float so it retained it's block level, and adjusted the overall form margin so it's centered.
HTML
<form method="post" action="https://www.mattepunkten.com/action_login.php">
<input type="hidden" name="error_url" value="#"/>
<label>Username:
<input type="text" name="fld_userid" size="15"/><label>
<label>Password:
<input type="password" name="fld_password" size="15"/></label>
<input type="submit" name="cmd_invia" value="Login"/>
</form>
CSS
label {
display: block;
}
form {
text-align: center;
margin-top: 30px auto;
}
http://jsfiddle.net/evanbriggs/kad7yy1L/
Its better form to contain your labels in a <label> tag.
For example:
<div class="form-element">
<label for="foo">Label</label>
<input type="text" name="foo" id="foo" />
</div>
CSS to style it left justified:
.form-element label {
display: inline-block;
width: 150px;
}
I would like the labels for my form elements to be greyed out if the input is disabled and am not able to get it to work for text inputs. I have tried the following:
input:disabled {
background:#dddddd;
}
input:disabled+label{color:#ccc;}
<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>
<br>
<label for='text1'>Text</label>
<input type='text' id='text1' disabled>
Js Fiddle
The styling works for the checkbox label, but not the text label. Are checkboxes the only input types that let you style their labels via css?
I testing with Firefox.
Based on the comment made by #andi:
input:disabled+label means that the label is immediately AFTER the input. In your HTML, the label comes BEFORE the text input. (but there's no CSS for "before".)
He's absolutely right. But that shouldn't stop us being able to solve the problem with a little trickery!
First step: swap the HTML elements order so that the <label> appears after the <input>. This will allow the styling rules to work as desired.
Then for the fun bit: use CSS to position the labels for text inputs on the left hand side!
input:disabled {
background: #dddddd;
}
input:disabled+label {
color: #ccc;
}
input[type=text]+label {
float: left;
}
<input type="checkbox" disabled="disabled" id="check1">
<label for="check1">Check</label>
<br />
<input type="text" id="text1" disabled="disabled">
<label for="text1">Text</label>
<br />
<input type="checkbox" id="check2">
<label for="check2">Check</label>
<br />
<input type="text" id="text2">
<label for="text2">Text</label>
This selector input:disabled+label{color:#ccc;} targets label elements that are placed after an input element that is disabled
In this snippet the label is after a disabled input, so the label element is gray
<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>
In this case, the label is before the input so the selector does not apply to it
<label for='text1'>Text</label>
<input type='text' id='text1' disabled>
Possible solution would be to wrap your elements in an extra div and apply a class name to the div, something like this
<div class='disabled'>
<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>
</div>
<div class='disabled'>
<label for='text1'>Text</label>
<input type='text' id='text1' disabled>
</div>
And then you can write your css like this
.disabled label {
color: #ccc;
}
You can use atribute selectors in CSS, example https://jsfiddle.net/8pp6mpp5/1/
Html
<label disabled="disabled">Hola Mundo!</label></br>
<label>Hola Mundo!</label>`
CSS
label[disabled="disabled"]{
background-color: #AAA;
}
You can also use floats and always put the label after the input Demo
You will have to wrap it in a span (or any other element really).
HTML :
<span>
<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>
</span>
<br>
<span>
<input type='text1' id='text1' disabled>
<label for='check'>Text</label>
</span>
CSS :
span {
display: inline-block;
overflow: hidden;
}
input {
float: right;
}
label {
float: left;
}
input:disabled {
background:#dddddd;
}
input + label {
float: none;
}
input:disabled + label {
color:#ccc;
}
I had the same issue: make a read-only input EXACTLY like label, I add a set of css styles to the input to get to that goal:
<input readonly class="inputLikeLabel" value="${myBean.property}"></input>
And in CSS:
.inputLikeLabel {
background-color: #ffffff;
text-align: center;
border: none;
cursor: none;
pointer-events: none;
}
By the css style, the input has a white background with no border, no mouse cursor and no click event...similar to label by the end !
If you want to leave your labels before your inputs and lighten your label, you can use the :has pseudo-class and ~ sibling selector:
label:has(~ :is([disabled],[readonly])) {
color: rgba(0,0,0,0.54); /* or opacity: .5; */
}