Tekst in input opschuiven - Forum

Wouter De Schuyter

23-08-2009 23:35

Zie hier dat mijn oplossing wél werkt én crossbrowser valid is,

http://paradox-productions.net/projects/text%20input%20with%20bg%20image/

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <title>CSS TEXT INPUT WITH BG IMAGE</title>
        
        <link rel="stylesheet" type="text/css" media="all" href="design/css/style.css" />
        
    </head>
    
    <body>
    
        <div class="container">

        
            <h1>Css Text Input With BG Image</h1>
            
            <form action="" method="post">
            
                <table>
                
                    <tr>
                        <td>Username</td>
                        <td><input type="text" name="un" class="un" /></td>
                    </tr>
                    
                    <tr>

                        <td>Password</td>
                        <td><input type="password" name="pw" class="pw" /></td>
                    </tr>
                    
                    <tr>
                        <td><input type="reset" value="Reset Form" class="fr" /></td>
                        <td><input type="submit" value="Submit Form" class="fs" /></td>
                    </tr>
                    
                </table>

                
            </form>
            
            <p class="copyright">&copy; 2009 All Rights Reserved To Paradox-Productions.Net | XHTML &amp; CSS VALID</p>
        </div>
    
    </body>
    
</html>

css

body {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #EEE;
	background: #222;
}

/* CONTAINER */
div.container {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #000;
	background: #444;
	padding: 0px 10px 5px 10px;
	margin: 10px auto;
	width: 400px;
}

/* DEFAULT STYLE INPUT */
input {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border: 1px solid #000;
	padding: 1px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #AAA;
}

/* FIELDS */
input.un {
	background: url('../img/icons/user.png') center left no-repeat #222;
	padding-left: 18px;
	width: 130px;
}

input.pw {
	background: url('../img/icons/key.png') center left no-repeat #222;
	padding-left: 18px;
	width: 130px;
}

input.fr {
	background: url('../img/icons/delete.png') center left no-repeat #222;
	padding-left: 15px;
	cursor: pointer;
}

input.fs {
	background: url('../img/icons/accept.png') center left no-repeat #222;
	padding-left: 15px;
	cursor: pointer;
}

/* TABLE FIX */
table, tr, td, th {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/* COPYRIGHT */
p.copyright {
	text-align: center;
	font-size: 11px;
	color: #FFF;
}

EDIT
SORRY! Niet gezien dat ik als laatste gepost had, excuse me mod SanThe :$