[HTML/CSS]Bild als Inputfeld!

Page 2 of 2 1 2
01/12/2013 08:41 .0nLy#16
Ja ich weiß.. Unsaubere weiße.. Jedoch hab ich 0 Plan wie das mit CSS geht.
01/12/2013 12:13 NotEnoughForYou#17
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.
01/12/2013 13:53 galaxyo#18
Quote:
Originally Posted by NotEnoughForYou View Post
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:

[Only registered and activated users can see links. Click Here To Register...]


Gruß,
galaxyo
01/12/2013 14:37 .0nLy#19
Danke!
Page 2 of 2 1 2