[HTML/CSS]Bild als Inputfeld!

.0nLy · 01/12/2013, 08:41

Ja ich weiß.. Unsaubere weiße.. Jedoch hab ich 0 Plan wie das mit CSS geht.

NotEnoughForYou · 01/12/2013, 12:13

in Css wäre das einfach

Variante 1. externes stylesheet

deine style.css:

Code:

input[type="text"], input[type="password"] {
    border:none;
    background:url("img/bg.png") no-repeat; 
    width:50px;
    height:20px;
    outline:none;
}

und in deiner index.html im <head>

Code:

<link rel="stylesheet" type="text/css" href="style.css" />

Variante 2. im <head> direkt

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input[type="text"], input[type="password"] {
    border:none;
    background:url("img/bg.png") no-repeat; 
    width:50px;
    height:20px;
    outline:none;
}
</style>
</head>
<body>
</body>
</html>

sind natürlich alles fiktive Werte.

galaxyo · 01/12/2013, 13:53

Quote:
Originally Posted by NotEnoughForYou
in Css wäre das einfach

Variante 1. externes stylesheet

deine style.css:
Code:
input[type="text"], input[type="password"] {
    border:none;
    background:url("img/bg.png") no-repeat; 
    width:50px;
    height:20px;
    outline:none;
}
und in deiner index.html im <head>
Code:
<link rel="stylesheet" type="text/css" href="style.css" />
Variante 2. im <head> direkt
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input[type="text"], input[type="password"] {
    border:none;
    background:url("img/bg.png") no-repeat; 
    width:50px;
    height:20px;
    outline:none;
}
</style>
</head>
<body>
</body>
</html>
sind natürlich alles fiktive Werte.

Dazu ist noch wichtig zu sagen, mit welcher Priorität die Styles gehandhabt werden.

Priorität sieht folgendermaßen aus:

Inline > Head > Extern

Das bedeutet: Alles was man innerhalb eines HTML-Tags an Stylesheets übergibt wird mit der höchsten Priorität betrachtet. Danach kommen dann die Stylesheets im <head></head> - Bereich. Diese werden gegenüber den externen Stylesheets bevorzugt.

Sinnvollerweise poste ich dazu noch einen Link der die ganze Thematik weiter vertieft:

Gruß,
galaxyo

.0nLy · 01/12/2013, 14:37

Danke!