team2005
asked on
Add picture to textbox
Hi!
Have this code:
But my problem is that picture, this line:
dosent work.
How do i add/show this picture in the textbox ?
Have this code:
<?php // RAY_EE_login.php
require_once('RAY_EE_config.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test system</title>
</head>
<body>
<link rel="stylesheet" href="default.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<Form method="post" action="RAYTEST.php">
<fieldset id="inputs">
<input id="username" name="usrn" type="text" placeholder="E-post" img src="images/topp1.png" align="right" autofocus required>
<br>
<input id="password" name="passo" type="password" placeholder="Passord" required>
</fieldset>
<fieldset id="actions">
<br>
<input type="submit" id="submit2" name="glemtpassord" value="Glemt passord?">
<br><br>
</fieldset>
<fieldset id="actions">
<input type="submit" id="LOGIN" name="loginn" value="Logg inn">
</fieldset>
</Form>
</body>
</html>
But my problem is that picture, this line:
<fieldset id="inputs">
<input id="username" name="usrn" type="text" placeholder="E-post" img src="images/topp1.png" align="right" autofocus required>
dosent work.
How do i add/show this picture in the textbox ?
u can add it as a background
<fieldset id="inputs">
<input id="username" name="usrn" type="text" placeholder="E-post" style="background:url(imag es/topp1.p ng)" align="right" autofocus required>
<fieldset id="inputs">
<input id="username" name="usrn" type="text" placeholder="E-post" style="background:url(imag
Try:
<fieldset id="inputs">
<input id="username" name="usrn" type="text" placeholder="E-post" style="background-image: url(images/topp1.png);" align="right" autofocus required>
ASKER
Hi!
I get the picure now, but i want it to be on the right side
and the picture must be in the center of the textbox.
And how to center text... Tryed to use align="center" but dident work
Added this in CSS
#username
{
background-image:url('imag es/topp1.p ng');
background-repeat:no-repea t;
}
Include CSS her
************************CS S********* ****
I get the picure now, but i want it to be on the right side
and the picture must be in the center of the textbox.
And how to center text... Tryed to use align="center" but dident work
Added this in CSS
#username
{
background-image:url('imag
background-repeat:no-repea
}
Include CSS her
************************CS
html, body
{
height: 100%;
}
body
{
font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
margin: 0;
background-color: #614912;
}
/*--------------------*/
#login
{
background-color: #614912;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
max-width: 400px;
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
-webkit-border-radius:0px;
webkit-appearance: none;
border-radius:0px;
-moz-border-radius:0px;
-moz-box-shadow:0px;
-webkit-box-shadow:0px;
box-shadow:0px;
}
#GULKN
{
background-color: #e4ab15;
font: bold 30px Arial, Helvetica;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
max-width: 50px;
color: #ffffff;
cursor: pointer;
position: left;
-webkit-border-radius:0px;
border-radius:0px;
-moz-border-radius:0px;
-moz-box-shadow:0px;
-webkit-box-shadow:0px;
box-shadow:0px;
}
/*--------------------*/
h1
{
text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
text-transform: uppercase;
text-align: center;
color: #666;
margin: 0 0 30px 0;
letter-spacing: 4px;
font: normal 26px/1 Verdana, Helvetica;
position: relative;
}
h1:after, h1:before
{
background-color: #777;
content: "";
height: 1px;
position: absolute;
top: 15px;
width: 120px;
}
h1:after
{
background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
background-image: -webkit-linear-gradient(left, #777, #fff);
background-image: -moz-linear-gradient(left, #777, #fff);
background-image: -ms-linear-gradient(left, #777, #fff);
background-image: -o-linear-gradient(left, #777, #fff);
background-image: linear-gradient(left, #777, #fff);
right: 0;
}
h1:before
{
background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
background-image: -webkit-linear-gradient(right, #777, #fff);
background-image: -moz-linear-gradient(right, #777, #fff);
background-image: -ms-linear-gradient(right, #777, #fff);
background-image: -o-linear-gradient(right, #777, #fff);
background-image: linear-gradient(right, #777, #fff);
left: 0;
}
h1:after2
{
background: #614912;
right: 0;
}
h1:before2
{
background: #614912;
left: 0;
}
/*--------------------*/
fieldset
{
border: 0;
padding: 0;
margin: 0;
}
/*--------------------*/
#inputs input
{
padding-right: 25px;
padding: 15px 15px 15px 30px;
margin: 0 0 10px 0;
font: bold 20px Arial;
color:#ffffff;
background-color: #96825a;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
}
#uid
{
height:20px;
padding:10px 25px;
}
#pwd
{
height:20px;
padding:10px 25px;
}
#username
{
background-image:url('images/topp1.png');
background-repeat:no-repeat;
padding: 15px 15px 15px 30px;
}
#inputs input:focus
{
background-color: #96825a;
outline: none;
}
/*--------------------*/
#LOGIN
{
background-color: #e4ab15;
float: center;
height: 55px;
width: 100%;
cursor: pointer;
font: bold 30px Arial, Helvetica;
text-align:center;
color: #ffffff;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
-webkit-border-radius:0px;
border-radius:0px;
-moz-border-radius:0px;
-moz-box-shadow:0px;
-webkit-box-shadow:0px;
box-shadow:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-appearance: none;
}
#JAKNAPP
{
background-color: #e4ab15;
float: center;
height: 55px;
width: 100%;
cursor: pointer;
font: bold 30px Arial, Helvetica;
text-align:center;
color: #ffffff;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
-webkit-border-radius:0px;
border-radius:0px;
-moz-border-radius:0px;
-moz-box-shadow:0px;
-webkit-box-shadow:0px;
box-shadow:0px;
}
#NEIKNAPP
{
background-color: #880051;
float: center;
height: 55px;
width: 100%;
cursor: pointer;
font: bold 30px Arial, Helvetica;
text-align:center;
color: #ffffff;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
-webkit-border-radius:0px;
border-radius:0px;
-moz-border-radius:0px;
-moz-box-shadow:0px;
-webkit-box-shadow:0px;
box-shadow:0px;
}
#LOGGUT
{
background-color: #d1c5b0;
float: center;
height: 55px;
padding: 10px;
width: 100%;
cursor: pointer;
font: bold 30px Arial, Helvetica;
text-align:center;
color: #ffffff;
border-radius:10px;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
-webkit-border-radius:0px;
border-radius:0px;
-moz-border-radius:0px;
-moz-box-shadow:0px;
-webkit-box-shadow:0px;
box-shadow:0px;
}
#submit2
{
background-color: #96825a;
float: center;
height: 35px;
padding: 0;
width: 100%;
cursor: pointer;
font: bold 20px Arial, Helvetica;
color: #ffffff;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
-webkit-border-radius:0px;
border-radius:0px;
-moz-border-radius:0px;
-moz-box-shadow:0px;
-webkit-box-shadow:0px;
box-shadow:0px;
}
table.hoved
{
background-color: #614912;
border: none ! important;
box-shadow: none ! important;
outline: none ! important;
max-width: 400px;
margin: -150px 0 0 -230px;
padding: 30px;
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
}
table.servicesT
{ font-family: Verdana;
font-weight: normal;
font-size: 20px;
color: #404040;
width: 330px;
background-color: #fafafa;
border: 0px #614912 solid;
border-collapse: collapse;
border-spacing: 0px;
margin-top: 0px;
width: 100%;
}
table.servicesT td.servHd
{ border-bottom: 1px solid #614912;
background-color: #96825a;
text-align: center;
font-family: Verdana;
font-weight: bold;
font-size: 20px;
text-align: center;
color: #ffffff;}
table.servicesT td.header1
{
border-bottom: 1px solid #614912;
background-color: #614912;
font-family: Verdana;
font-weight: bold;
font-size: 20px;
text-align: left;
color: #614912;
hight: 50px;
}
table.servicesT td
{ border-bottom: 0px solid #614912;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 20px;
text-align: center;
color: #404040;
background-color: #d1c5b0;
text-align: center;
padding-left: 3px;}
able.servicesJN td
{
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 20px;
text-align: center;
color: #404040;
background-color: #ffffff;
text-align: center;
padding-left: 3px;}
table.TESTE td
{
color: #ffffff;
}
.servBodL
{
background-color: #d1c5b0;
border-left: 0px solid #614912;
}
add...
to center text..
#username
{
text-align:center;
}
to center text..
for image to center try...
#username
{
background:url('images/topp1.png') no-repeat center;
}
I get the picure now, but i want it to be on the right sideWhich do you want? Do you want the picture on the right side or in the center?
and the picture must be in the center of the textbox.
Align is a deprecated attribute so I shouldn't have included it in my comment above. I was only paying attention to the image part of your code and didn't notice it when I copied and edited it. IshaanRawat has shown you how to center your text and the background image above.
Input fields are inline elements and are handled like another character in a string of text. If you want the input field on the right, put it in a right-aligned paragraph element. The following assumes you've implemented IshaanRawat's CSS code for placement of the image.
<fieldset id="inputs">
<p style="text-align: right; margin: 0;"><input id="username" name="usrn" type="text" placeholder="E-post" autofocus required></p>
why do you want a picture in the textbox?
ASKER
Hi!
Picture must be align to the right
and text center
Picture must be align to the right
and text center
#username
{
background:url('images/topp1.png') no-repeat right center;
text-align: center;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
@xmediaman You posted the comment 21 seconds before...
and what a co-incidence...
98% same... LOL...
and what a co-incidence...
98% same... LOL...
ASKER
thanks
A URL will also work...
In the meantime have a look at these link... might help...
http://viralpatel.net/blogs/textbox-with-background-image-using-css/
http://www.dotnetspider.com/forum/165999-Insert-Image-TextBox.aspx