My image is ruining my text styling, how can i solve this? - html

I have created a simple text label with a input field and a image behind it:
<p><label for="something" style=" padding: 5px; display:inline-block; width: 440px; border:1px solid white;">Something Since<input type="text" id="datepicker" size="7" readonly></label></p>
With all the other text labels, that havent got the id datepicker (which contains a image and when clicked on the image a daterpicker pop-up) the text is automaticly centered middle in the box. This isnt the case with the image text..
Here a image which makes it a bit clearer:
Anyone a clue how i can fix it so the text and image is centered as well in the inline box?

To center images and text in one line you can apply vertical-align: middle to your image like this:
<p>
<label for="something">Something Since</label>
<input type="text" id="something" />
<img src="" style="vertical-align:middle;" />
</p>
http://jsfiddle.net/2nxsQ/

Related

Why can't I write from the beginning of the box when i modify input text size?

Why can't I write from the beginning of the box when i modify input text size? ?
That s my code:
<input type="text" style="width:600px; height:300px;" value="" placeholder="Introdu textul tau:">
Use textarea instead of input.
<textarea style="width:600px; height:300px;" placeholder="Introdu textul tau:"></textarea>
By "beggining of box" you meaning corner "0,0"?
You have to use padding to do the trick since vertical-align doesn't work on text inputs.
padding-bottom: 250px;

put input type text in the center of an image

I need to create an html page. In this html page, I need to have an image with an a <input type="text "/>. This input is in the middle of the image; this input type text also have the "search" icon inside the input on the right.
I tried to build the code in this way:
<html>
<img src="./home/image.jpeg">
<input type="text" name="food" placeholder="insert the food">
</input> <!-- this input has the icon search on the right-->
</img>
<html>
Obviously it doesn't work. Is there a good way to make it work?
Put your input inside a div, and make the image the background-image of that div.
You need to be more specific with your question. can you upload a link. but you also Add a Background image to the input type text. Something like this:
input { background-image: url("search_icon.png"); position:absolute; }
This should do it for you
html:
<div class="bg">
<input type="text" name="food" placeholder="insert the food">
</div>
CSS:
.bg{
background-image: url("http://lorempixel.com/200/200/");
background-repeat:no-repeat;
height:200px;
width:200px;
line-height:200px;
text-align:center;
}

How to move the text in the html align to top?

When I create the text in the html page , I add a multiple line textbox on right side, and it shows like this.
what I expect is the second picture, what kind of html code/css can achieve it?
.formfield * {
vertical-align: top;
}
<p class="formfield">
<label for="textarea">Label for textarea</label>
<textarea id="textarea" rows="500">Textarea</textarea>
</p>

HTML Input Text with icon [duplicate]

This question already has answers here:
Clear icon inside input text
(18 answers)
Closed 6 years ago.
I am working on a webpage where I have a HTML Input Text element which is disabled onload.
I currently have a edit button next to the Input Container onclick of which I disable/enable the field.
<input type="text" name="TxtBx1" id="TxtBx1" value="This is the first Textbox" onblur="toggleState('TxtBx1')" disabled="true">
<img class="onInput" src="/Server_Status/images/edit.png" title="Edit" alt="Edit" height="15" width="15" onclick="toggleState('TxtBx1')">
Is there any other way in which I could place this icon in the input tab itself without overlapping the text.
img.onInput
{
position: relative;
left: -20px;
}
I tried using CSS with but the text gets underneath the icon which I do not want.
I am trying to get something like the "google search" add-on in firefox. Is that at all possible with simple input text and icon?
Thanks in advance :)
Update:
I want a button like in this image on text input. The icon is clickable and I want to trigger a JavaScript function onClick event.
Found the answer I was looking for: https://stackoverflow.com/a/6258628/2596762
You can create a CSS class with the background property and specify the location of your image, set it to no-repeat so it only displays the image once, then fiddle with the positioning by adding padding attributes and the like.
So for your CSS, something like:
.search {
background: url('image.jpg') no-repeat;
}
Then you just add it as the class attribute to your text box tag:
<input type="text" name="TxtBx1" id="TxtBx1" class="search">
background: url(user.gif) no-repeat scroll 7px 7px;
padding-left:30px;
try using this:
<div class="search-div">
<input class="search" type="text" placeholder="Search here" />
<img src="image-url" /></div>
here is css code:
.search-div{
border:1px;
border-style:solid;
border-color: lightgrey;
}
.search{
border:none;
}
This css will make div look like a text box and removes the outline of input text-box.
You can format the size of image link and also change the link address from "#" to the desired url.

Link inside of input tag

How to display a a href and a img src inside a input box (text box). ex: i want to display this inside a text box ( <input id=link )
<img src="http://www.mysite.com/img.jpg" border="0" alt="mysite.com">
thanks in advance.
Based on the comments, I would guess that you want an input field that has that HTML code as the default text. You must use character reference codes for quotes and less/greater than signs.
<input type="text" value="<a href="http://www.mysite.com/link" target="_blank"><img src="http://www.mysite.com/img.jpg" border="0" alt="mysite.com"></a>" />
(By the way, you mentioned "like in Photobucket" -- you can just look at the site's HTML to see how they do it.)
You have two options.
Place the image as a background of the input, but this won't be clickable.
Absolutely position the element over an input.
1:
.myInput { background:url(path/to/img.jpg) 5px 5px no-repeat; }
2:
HTML
<div class="inputContainer">
<input class="myInput" type="text" name="myInput" id="myInput" />
<img src="#" />
</div>
CSS
.inputContainer { position:relative; }
.myInput { padding-left:25px; /* This will move the text from under the image */ }
.inputImg { left:5px; position:absolute; top:5px; z-index:5; }
You'll need to play with the position and values depending on your input size, image size and general placement, but that should do what you want.
As comments mention, you can't literally put a link in an input text box (although you could simulate one with JavaScript).
For the background image, use CSS background-image.