I wanted to create a textbox for a unit measurement. E.g "1 Kg".
I know can wrap a text just behind the textbox, but I wanted the unit to be inside the textbox itself. While the number can be changed, the unit behind it should stay just at the end of the textbox itself. Is there a way to do it? Possibly using CSS?
Thanks!
Wrap your input in a div, add your unit as a sub element to that div and position it above the textbox.
JSBIN: http://jsbin.com/mayurexoyi/1/edit?html,css,output
HTML
<div class="input_wrapper">
<input type="text" value="20" />
<div class="unit">KG</div>
</div>
CSS
input {
font-size:14px;
padding:10px 25px 10px 10px;
border:1px solid #CCC;
}
.input_wrapper {
float:left;
position:relative;
}
.input_wrapper .unit {
position:absolute;
right:10px;
top: 14px;
color:#999;
}
I think THis will help you out .
HTML :
<div>
<input type="text" />
<label>kg</label>
</div>
CSS :
div{
border:1px solid gray;
width: 180px;
}
label{
font-family:arial;
font-size:.8em;
}
input{
border:none;
}
input:focus{
outline:none;
}
check out the fiddle
Try this:
<span contenteditable name="kgData" style='border: thin solid #000;'> Enter Value </span>
<span contenteditable=false> Kg</span>
After submit, get kgData, then you can access that data on other page/ save it in db. See, if that helps.
Related
Hi i want to make a customized input text box like this image:
I search many articles but found nothing to do this so please help me
This is not a new answer. But some modification to answer of #alvaro-menéndez to make it more compact and generic.
div {
position:relative;
display:inline-block;
margin:50px;
}
input[type="text"] {
width:300px;
padding:10px;
outline:0;
border:0;
background-color: #eee;
}
.preinput {
position:absolute;
z-index:-1;
display:block;
bottom:-1px;
left:-1px;
border-bottom:1px solid #999;
border-right:1px solid #999;
border-left:1px solid #999;
width:100%;
height:20px;
}
<div>
<span class="preinput"></span>
<input type="text" placeholder="Search" />
</div>
You could use this little and simple jquery to add an element after your input:
$(".input").after("<span></span>");
and then you just have to style it like in this FIDDLE
Edited: updated fiddle to put the element UNDER the input and move it slightly bottom and left so it will be visible even if input has a background-color
You can just use a css background image on your input. Use a placeholder attribute for you "search".
HTML
<input type="search" placeholder="Search" />
CSS
input[type="search"]{
background:url(your_image_path) left bottom no-repeat;
}
I want my firstLabel to be just right side of the textfield on the same line.
//css
input[type="text"]{
display:block;
margin-bottom:10px;
width: 50px;
text-align:center;
float:center;
}
label {
float: right;
text-align:right;
color: white;
font:12;
}
//html
<label for="first">First Value</label>
<input type="text" value="93" id="firstTF"/><br/>
http://jsfiddle.net/x3gb6gcw/2/
html
<input type="text" value="93" id="firstTF"/>
<label for="first">First Value</label>
css
input[type="text"]{
display:block;
margin-bottom:10px;
width: 50px;
text-align:center;
display:inline-block;
}
label {
text-align:left;
color: #000;
font:12;
display:inline-block;
}
Try this-
CSS Code-
input[type="text"]{
display:inline;
margin-bottom:10px;
width: 50px;
text-align:center;
float:left;
}
label {
display: inline;
text-align:right;
color: white;
font:12;
}
Fiddle - http://jsfiddle.net/Ashish_developer/gjamenoy/
In fiddle, I have changed the color of label since fiddle's background is white, so giving white color to label will not show it. Just to show it in fiddle I have given color black to it.
Form controls are inline elements so if you just put your label tag after the textbox input control then they'll line up on their own(unless you set the width of the parent element too narrow for them both to fit naturally.
<input type="text" id="myText"/><label for="myText">My Label</label>
No need for CSS to position them this way, they float left by default.
Strange issue here which I can't see the problem with! I'm setting the width of the entire element using the class sale_container. But it's width is not changing at all!
See JSFiddle Demo
CSS:
/*Sale styles*/
.add_sales input {
background:none;
border:none;
color:#FFF;
}
.sales_toolbar input {
width:30px;
}
.sale_container {
width:500px;
border:2px solid #FFF;
}
.sale_image {
height:200px;
width:200px;
background-size:cover;
border-radius:10px;
}
.sale_image_container {
border:solid #000 1px;
float:left;
border-radius:10px;
background-color:#353535;
}
.sale_image_container p {
margin:10px;
}
.sales_toolbar {
float:right;
}
HTML:
<form class="add_sales" name="add_sales" action="php/process_sales.php" method="post">
<div class="sale_container">
<div class="sale_image_container">
<div style="background-image:url(data/images/20140121/0/image8.jpg)" class="sale_image"></div>
<p>KR</p>
</div>
<div class="sales_toolbar">
<input type="text" readonly value="KRR" id="50_selected" /> <!-- Selected -->
</div>
</div>
</form>
It seems to be working on the JSFiddle, but when I preview it in Chrome, it looks like this:
It's possible that additional styles are being included from an alternate CSS source. Have you tried using Inspect Element to view the div, and see if it has any unexpected styles being applied? Chrome natively has the feature built-in if you right-click any element.
Glad to help.
Set position to absolute of sale_container to change width.
.sale_container{
width: 300px;
position: absolute;
border: 2px solid #E97676;
}
Use firebug (http://getfirebug.com/) to inspect html element and css attributes.
I have a simple textbox inside a div, and I want a hover rule to apply when hovering over the div but not the textbox.
Code:
<div id="div1" style="display:inline-block; border:1px solid #777777; padding:16px; background-color:#eeeeee;">
<input type="text" name="txt1" id="txt1" />
</div>
#div1:hover {
background-color:#ffffff !important;
cursor:pointer;
}
JSFiddle
When hovering over the textbox, the div's hover rule must not apply. Is there a way to do this without JavaScript?
Is this what you are looking for..? Please see the fiddle.
HTML
<div id="container" >
<div id="div1" style="">
</div>
<input type="text" name="txt1" id="txt1" />
</div>
CSS
#div1:hover{
background-color:red !important;
cursor:pointer;
}
#container{
position:absolute;
}
#div1{
position:absolute;
display:block;
border:1px solid #777777;
padding:16px;
width: 180px;
background-color:#eeeeee;
}
#txt1{
top:5px;
left:5px;
background-color:white !important;
position:absolute;
}
http://jsfiddle.net/8NRNQ/4/
Is this what you are looking for?
#div1 { display:inline-block;
border:1px solid #777777;
padding:16px;
background-color:#eeeeee;
}
#div1:hover {
background-color:red;
cursor:pointer;
}
Testing Fiddle: http://jsfiddle.net/8NRNQ/3/
I think you need one simple line of JS for that. The problem is, that you can't change the background of the containing div with hover over the input just by CSS. But in jQuery for example, this is pretty easy
$('#div1 input').hover(function(){$(this).parent.css(SET BACKGROUND AND CURSOR BACK TO THE NO-HOVER-STYLE)});
For anyone wondering, I ended up using JavaScript:
$('#div1').mouseover(function () {
var el = $(this).find('input');
if (!(el.hasClass('inputishover'))) {
$(this).addClass('divhover');
}
}).mouseout(function () {
$(this).removeClass('divhover');
});
$('#div1 input').mouseover(function () {
$(this).addClass('inputishover');
}).mouseout(function () {
$(this).removeClass('inputishover');
});
JSFiddle
i have a form element- text input and a submit button- Im trying to get them to render inline with each, the submit button renders slightly above the input button- i tried wrapping the two in a div and making the maximum height the same still didnt work. Here's my code/css- the button has a height of 29px- they are both in line
<div class="submit_form">
<input type="text" name="unique_code" class="unique_code"/>
<input type="image" name="submit_btn" src="/imgs/submitbg.png"/>
</div>
.submit_form{
height:30px;
}
.unique_code{
background-color:#000;
border: 1px solid #e31e25;
width:250px;
height:25px;
color:#fff;
}
Change your CSS to this:
.submit_form *
{
height: 30px;
display: inline;
vertical-align: middle;
}
It should work now. Have tested it in IE and Chrome.
Simply add vertical-align to the textbox:
.unique_code{
vertical-align: top;
background-color:#000;
border: 1px solid #e31e25;
width:250px;
height:25px;
color:#fff;
}
Try this.
// css
.img_fix {
vertical-align: text-top
}
// html
<input type="image" name="submit_btn" class='img_fix' src="http://www.google.com/images/nav_logo29.png"/>