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;
}
Related
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.
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 problem with my search box. I'm trying to make the text field and button the same height, but I can't get it right in all browsers. Here is the code: http://codepen.io/anon/pen/ygCFz . This method works fine in Firefox, but not in Chrome.
So what would be the best method to have an equal height and position for both the text field and button?
Thanks!
//edit: because someone asked for the code for further reference, here it is:
HTML
<form id="search" action="" method="get">
<input type="text" name="search" class="sfield" value="search and go"/>
<input type="submit" value="Search" class="sbutton"/>
</form>
CSS
input.sfield{
background-color:#fff;
border-color:#cecece;
border-style:solid;
border-width:1px 0 1px 1px;
font-size:0.9em;
line-height:1em;
height:26px;
}
input.sbutton{
background-color:#d91515;
height:inherit;
border:none;
color:#fff;
position:relative;
left:-6px;
bottom:-1px;
height:28px;
}
Use padding instead height on input elements. Line-height should be exactly the same as font-size for Firefox. So if you want you font-size to 16px, put your line-height to 16px and add padding at top and bottom. For your submit button, use absolute positionning to be sure it will be at top:0 and bottom:0. Just add padding-left for submit button width equivalent on input and it's all done !
#search {
position:relative;
display:inline-block;
}
input.sfield{
background-color:#fff;
border-color:#cecece;
border-style:solid;
border-width:1px 0 1px 1px;
font-size:0.9em;
line-height:1;
padding:5px;
display:inline-block;
padding-right:50px;
}
input.sbutton{
background-color:#d91515;
border:none;
color:#fff;
position:absolute;
top:0px;right:0px;bottom:0px;
width:50px;
}
You can either set a definite height property for both elements or you can simply tell Sbutton to inherit the styles from Sfield.
<input type="submit" value="Search" class="sfield sbutton"/>
I also adding a bit of padding to make it even.
http://codepen.io/anon/pen/zBlwD
HTML:
<form id="search" action="" method="get">
<input type="text" name="search" class="sfield" value="search and go"/><input type="submit" value="Search" class="sbutton"/>
</form>
CSS:
input.sfield{
background-color:#fff;
border-color:#cecece;
border-style:solid;
border-width:1px 0 1px 1px;
font-size:0.9em;
line-height:0.9em;
height:26px;
margin: 0;
}
input.sbutton{
background-color:#d91515;
height:inherit;
border: 1px solid #d91515;
color:#fff;
position:relative;
margin: 0;
height:30px;
}
Well, I hope the solution isn't this simple, but you have height defined twice in your rule for the sbutton class:
input.sfield{
background-color:#fff;
border-color:#cecece;
border-style:solid;
border-width:1px 0 1px 1px;
font-size:0.9em;
line-height:1em;
height:26px;
}
input.sbutton{
background-color:#d91515;
height:inherit; //that's one
border:none;
color:#fff;
position:relative;
left:-6px;
bottom:-1px;
height:28px; //that's two
}
See what happens when you get rid of one. It should work. Also take a look at the line-height rule for your textbox. If the font size is different than the line height, that would explain why the sizes are different. Firefox and Chrome use different conversions from ems to pixels and vice versa.
Using CSS3 I am trying to display search box with glass image. I am doing it basically by placing a image on text box and setting its left-margin. My code is here:
<body>
<form id="header-search">
<input type="text" class="searchbox" /><input type="submit" class="button" value="" />
</form>
</body>
#header-search{overflow:auto;}
#header-search input.searchbox
{
border-bottom-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-bottom-left-radius:5px;
border-top-left-radius:5px;
-webkit-top-left-radius:5px;
-moz-left-radius:5px;
border:1px solid #8e8e8e;
background-color:white;
height:16px;
padding:4px;
padding-left:28px;
padding-right:10px;
color:#4a4a4a;
float:left;
}
#header-search input.button{
border:0px dashed red;
padding:0;
margin:0 0 0 -185px;
width:24px;
height:24px;
background:transparent url(../images/SearchImage.png) center center no-repeat;
float:left;
}
UPDATE
I am not using em rather px
I have tried different css reset.
please see image for details difference.
I have done this code in new css/ html file where there is no other line of code.
Using position:absolute seems to be a more reliable approach for this kind of thing.
HTML
<form id="header-search">
<div class='relative'>
<input type="text" class="searchbox" /><input type="submit" class="button" value="" />
</div>
</form>
CSS
.relative {
position:relative;
}
.relative .button {
position:absolute;
left: 20px;
z-index:1;
}
You may want to make this css more specific to this search input rather than all .button's etc
Its because you are not specifying a width of your search input box.
If you do that, you method will work.
Else, of course, the better way is to use position:absolute to position your button.
This will ensure the layout across all browsers.
If you want to place image for search input box , you can try this http://jsfiddle.net/HmKZQ/1/
If you need the button for click then you can try this
http://jsfiddle.net/HmKZQ/3/
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"/>