i need to add font-icon inside input field so i used this method
<input type="text" name="your name" placeholder=" YOUR NAME" style="font-family:Flaticon" class="restrict">
as you see placeholder=" YOUR NAME" this display font-icon but my problem is when user types some text place holder disapper so i need font icon to be placed permanent inside input field like <lable>
can someone help me
You can't. What do you expect it to look like? placeholder disappears by design.
If you want to prefix an icon in front of your input field, put them together in a container, give this container the needed style and put there your icon and your input-tag. That's the way, how bootstrap your problem solves.
Shortened example:
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
Of course, you need CSS.
Related
Trying to get the input box's to line up with their text, the second input box drops a line and throws everything off when float: right is on. I'd like to know why it skipping a line and how to fix it please. Thank you.
tried rearranging, tried clearfix.
https://jsfiddle.net/dpq1fzcj/4/
<section>
<h1> </h1>
<div id="controls" class="controls">
<form id="add-book-form">
Title:
<input type="text" name="title" required /><br>
Author:
<input type="text" name="author" required /><br>
Pages:
<input type="text" name="pages" type="number" required /><br>
Read:
<input type="checkbox" name="read" /><br>
<input type="submit" id="add-book-btn" value="Add"> <button onclick="hideForm()">nvm</button>
</form>
<button onclick="addBookForm()">Add Book</button>
</div>
</section>
You have several problems.
First, you're floating right the input fields and leaving labels to figure out what to do. First label ends up ok, second up breaks the flow because it fits in the same row as the input field since the text line-height is smaller than height of the input field. But the input field doesnt fit in that same line as its label.
Second, you're using <br> for breakings instead of wrapping everything in some kind of a block element.
Third, you're not using label tag at all.
So, to fix this:
Add labels (and for property in labels)
Float labels left and inputs right.
Add div around every label/input pair and add clearfix to it.
Lose <br> altogether.
In my search field I just figured it out that, when I click the input field it remains till the content entered. I want to hide the placeholder when the field is clicked.
Since this site is going to be delivered to another team I don't want to add JavaScript or jQuery code here. Because it was one of the requirement from the client. How can achieve it using CSS and HTML? This is a default behavior of HTML.
<input type="text" value="" placeholder="Keywords or Chassis/ Reference No">
You can use the selector input:focus::placeholder:
input:focus::placeholder {
visibility: hidden
}
<input type="text" value="" placeholder="Keywords or Chassis/ Reference No">
I have a read only text-box, its value is coming from database.. I am not sure about text length..client wants that text-box to be dynamic based on content.
Is there any way to do with pure css??
Thanks in advance
<div class="form-item ">
<label class="control-label">Task Name</label>
<input class="form-control form-text" readonly="readonly" type="text"
value="text-box width should change based on my length">
</div>
No, you can't do this with a text input and CSS.
But if it's read-only, why use a text input? Why not create a span and style it to look like a text input?
I'm trying to do something exactly like this sign up form here. They have appended their domain name as undeletable value to allow user to create a sub domain folder. I want to do the same with following input:
<input type="text" class="form-control inputlogin" name="subdomain_name" placeholder="Sub Domain" required="" value=""/>
I found a technique here but I'm not looking to append a prefix. The value must be after like in the example.
It is just a styling trick. input are either completely editable or disabled (not editable at all). There is no way to get around this.
What is done in the form you linked to is a trick where the "frozen" text is placed upon the input field so it looks as if it is a part of the actual input tag, but it is not.
Se my simple jsfiddle illustration. Look at how the styling can be used to create the illusion you want.
Here is an example using Bootstrap 3:
Bootstrap 3 Sub-domain input
<div class="container">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Your sub-domaion here">
<span class="input-group-addon" title="Type of Question">.our-domain.com</span>
</div>
</div>
</div>
I am new to html. This is a very simple question. I am dealing with forms. I want all the input text fields to start at the same x-axis point regardless of the size of the label. I want the labels to be left aligned and all the text fields to start at the same x-axis point.I don't want to use tables or " ". Is there a simple solution or Should I use separate divisions for labels and input fields? I don't mind using css but I prefer it to be simple.
<form>
<label>Name</label>
<input type="text" name="n1"><br>
<label>Phone No.</label>
<input type="text" name="p1">
</form>
I want "n1" and "p1" to start at the same x-axis point.
Add this style to your page:
label{
display:inline-block;
min-width:80px
}
Check here Fiddle
You can use paragraph tags for every input element.
<p><input type="text" name="your name"></p>
<p><input type="email" name="your email"></p>