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;
}
Related
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"/>
I'm trying to make a custom file selection button in HTML and CSS.
I've read on the internet that it can be done, hiding the original button and 'drawing' a new one over it, like so:
HTML:
<div class="upload">
<input type="file" class="upload" name="upload"/>
</div>
CSS:
div.upload {
width: 157px;
height: 57px;
background-color: silver;
}
div.upload input {
display: block !important;
width: 157px !important;
height: 57px !important;
opacity: 0 !important;
overflow: hidden !important;
}
And it's working, obviously... but I want only a text, not a image.
So I tried it like this way:
<div class="upload">
Choose File
<input type="file" class="upload" name="upload"/>
</div>
And it won't work when I click on the label. It only works when I click below it.
Why doesn't this work and how can I make this work? I also tried with pointer-events and nothing...
You have to assign your text to your <button>, using a <label> with a for attribute equal to the id of the <input>.
<div class="upload">
<label class="uploadLabel" for="uploadBtn"> Choose File</label>
<input id="uploadBtn" type="file" class="upload" name="upload" />
</div>
In order to completely cover the button with your label, you'll also have to add absolute positioning.
.uploadLabel {
position: absolute;
}
Demo
Why is this necessary?
The event is triggered on your button. This basically means, clicking on a plain text element won't do anything. To trigger a click event on your button, you simply delegate the click on your label to your button.
use an actual label element. that will take care of delegating the click from the container to the input.
set opacity to 0, as you did in your original post (another, more verbose, and arguably more semantic approach will be to position the input absolutely and the label relatively, and set a lower z-index to the input. that will cover the input completely, effectively hiding it — see the second example).
the benefit here is you get clickable area that matches the label surface only, so you can style and set the dimensions to the label alone.
.upload {
display: block;
width: 157px;
height: 57px;
background-color: blue;
}
.upload input {
opacity: 0;
}
<label class="upload">
Choose File
<input type="file" class="upload" name="upload" />
</label>
… and the more verbose approach:
.upload {
position: relative;
display: block;
width: 157px;
height: 57px;
background-color: blue;
}
.upload input {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<label class="upload">
Choose File
<input type="file" class="upload" name="upload" />
</label>
Please take a look at http://jsfiddle.net/JHMqG/
I'm trying to figure out how to change the background of the radio button when clicked.
So far, I've been successful with the cat option, but I'm stuck at the dog option. I need the dog option to work because I want the background change to include the circle button.
Please advise. Thank you.
Here you go: http://jsfiddle.net/JHMqG/1/
On the dog, the label element only contained the text. On the cat, the label element contained the text and the radio button. Also, I cleaned up your HTML a bit.
See this:
DEMO
I changed a bit the HTML:
<div>
<input type="radio" name=1 Value=420 id="a1">
<label for="a1" class="radiostyle" >Cat ($420)</label>
</div>
<div>
<input type="radio" name=1 Value=375 id="a2">
<label for="a2" class="radiostyle">Dog ($375)</label>
</div>
and added a few bits to the CSS, so it now looks like this:
div { margin: .5em; }
input, label {
position: relative;
display: inline-block;
vertical-align: middle;
}
input[type=radio] { margin-right: -1.65em; z-index: 2; }
.radiostyle{
background-color: #CCC;
border-radius: 8px;
padding: 4px 4px 4px 1.75em;
}
.radiostyle:hover{
background-color: #0F6;
cursor:pointer;
}
input[type=radio]:checked+label {
/* Or `#a1:checked+label` if you only want it for that input */
background-color: #0F6;
}
The problem was the <input> was just preceding the <label> in the cat option, but in the dog option the <input> was inside the<label.
I corrected it by moving the <input> of the dog option to be preceding the label, you can see it working here:
http://jsfiddle.net/SxPvz/
I am having a ridiculous problem where my input text field and submit buttons are not lining up and I really can't figure out an elegant solution of how to fix it. As you can see in the image below, the input text field (labeled "Enter Keywords" in the upper right") is 2px higher than the "Search" submit button:
Here is the HTML:
<div id="search">
<form action="#" method="POST" id="search_form">
<div id="search_inputs">
<input type="text" placeholder="Enter Keywords" name="keywords" />
<input class="button" type="submit" name="search" value="SEARCH" />
</div>
</form>
</div>
Here is the css code:
#search_form .button {
background: black;
color: white;
padding: 3px 15px;
border: none;
font-size: 7pt;
height: 18px;
}
#search_form input[name="keywords"] {
width: 175px;
}
#search {
margin-top: 7px;
float: right;
}
I'm pretty sure setting the font-size to 7pt is messing it up, but I'm not sure why and I don't know how to deal with this because that's the font size of my other buttons in the area.
Thanks for any help!
adding a float: left; to the #search_form input[name="keywords"] style align's their tops correctly, then adding some margin-right should get you good to go.
Fiddle
The issue stems from the float: right on the search button. The input box has a natural display: inline-block to it, which causes the slight drop. Normally when you float right the fix to this is to move that element upwards in the DOM. This won't work in this case. By changing the input to a floated element you are also forcing it to be display: inline.
Though I'm not sure why you can't just add a display: inline to the element.
How do I create a text box that displays hint on the right when in focus?
Example : http://www.airbnb.com/rooms/new
(click on the address text box)
It's also possible without javascript.
<input type="text" value="Focus me to see a hint!" style="width: 200px; height: 30px;"/>
<div>Congratulations, you found me !</div>
.input + div {
display: none;
position: relative;
top: -30px;
left: 200px;
}
.input:focus + div {
display: block;
}
Enjoy ;)
Its is simple with placeholder
<input type="text" placeholder = "your gray text" />