Fileinput-Felder ansprechen

Yamram · 8. Februar 2012

Hey Leute,
nach meiner (unnötigen) Sperrung bin ich nun wieder dabei Und da habe ich auch direkt ein Problem Wie kann ich bei einem Fileinput-Feld diesen kleinen Button ansprechen? Das heißt, ich möchte ihn mit CSS schöner machen.

[attachment=1]Bild1.png[/attachment]

Das Bild ist aus Google Chrome. In Firefox sieht das ganze so aus:

[attachment=0]Bild2.png[/attachment]

Wie kann ich da überhaupt etwas ansprechen? Mein bisheriger Code sieht so aus:

Code

form input {
	display: block;
	margin-bottom: 6px;
	padding: 8px;
	margin-left: 14px;
	border-radius: 5px;
	border: 1px solid #aaaaaa;
	font-family: Arial;
	background: #ffffff;
}

Mit freundlichen Grüßen,
Philipp E.

unkown-6363 · 8. Februar 2012

Code

form input[type="submit"]
{
    background-color: dunkelbunt;
}

Yamram · 8. Februar 2012

Hast du mir vielleicht nicht zugehört? Deine Antwort ist ziemlich unpassend.

unkown-6363 · 8. Februar 2012

Stimmt sorry. Wie heißt den dein verwendeter input type?

Yamram · 8. Februar 2012

Also erstens war der Typ falsch, ich rede hier von file. Weiterhin kannst/ musst du die Anführungszeichen weglassen. Und das, was du machst, habe ich doch schon längst gemacht! ... und es führt nicht zur Lösung. Ich möchte den oben markierten (gelb) Bereich ansprechen.

Basi · 8. Februar 2012

Huhu,

das Input Feld vom Typ file kann man nicht direkt ansprechen, es gibt aber eine tolle Möglichkeit es alternativ zu gestalten:

Code

<style>
input, div {
  margin: 0;
  padding: 0;
}




/* die " lassen wir selbstverständlich NICHT weg
   (verweise auf php code: echo Hallo; [falsch])*/
input[type="file"] {
  width: 200px;
  height: 25px;




/* per OPACITY ausblenden, NICHT display: none;
   sonst ist das input feld nicht mehr anklickbar */
  -khtml-opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
}




div#input_file_button {
  width: 200px;
  height: 25px;
  background-color: red;
}




div#input_file_button:hover {
  background-color: blue;
}
</style>




<div id="input_file_button">
  <input type="file" />
</div>

Alles anzeigen

Fileinput-Felder ansprechen

Jetzt mitmachen!

Teilen