איך אפשר לעצב את input type="file"

[sts]

אני שעהה מנסה שעה לא מצליח
מישהו פה יודע איך?

[SniR-S]

אתה יכול בכל מיני דרכים,
ראשונה, אתה מוסיף לו את הקוד הבא:

style="background-color: #666;"

דרך נוספת זה לקבוע אותו כאלמנט class מסויים, ואז להגדיר אותו ב css, לדוגמא:
HTML

class="uploadfile"

CSS

.uploadfile {
background-color: #666;
}

אתה יכול לקבוע את input בכללי כעיצוב משלך ב CSS ..
ויש עוד דרכים, אבל בעיקרון זה ככה..

[Scolpy]

הנה כמה דוגמאות לעיצוב כפתורים עם שימוש בגליונות CSS(תקן XHTML 1.1 STRICT):

1)

input[type="file"]{
    border: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

2)

input[type="file"]:hover, input[type="file"]:focus{
    border: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

3)

input[type="file"] {
    background: url('input_background.png') repeat-x;
    border: 1px solid #fff;
    height: 10px;
    padding: 0 3px 0 3px;
}

כמובן שישנן עוד וריאציות, אך זה בכללי

בהצלחה!

[sts]

את כל אלה אני יודע איך לעשות
אבל אני רוצה לעשות את הכפתור של "עיון..." כתמונה שלי שאני עיצבתי
ואת שורת הטקסט להשאיר איך שהיא

[SniR-S]

<input type="image" src="image.gif" name="image" width="60" height="30">

[sts]

לא עובד
כשאתה עושה <input type=tile>
אז אתה מקבל 2 דברים
כפתור "עיון..."
ושורת טקסט ששם כתוב הקובץ שבחרת
עכשיו כשאני עשיתי <input type="file" class="myclass"> אז הוא יוצא דפוק כזה
איך אפשר לעצב רק את הכפתור ולא את השורת טקסט

[IsraKal.co.il]

נכתב במקור על ידי sts

לא עובד
כשאתה עושה <input type=tile>
אז אתה מקבל 2 דברים
כפתור "עיון..."
ושורת טקסט ששם כתוב הקובץ שבחרת
עכשיו כשאני עשיתי <input type="file" class="myclass"> אז הוא יוצא דפוק כזה
איך אפשר לעצב רק את הכפתור ולא את השורת טקסט

תעתיק לכאן את שורת הקוד הקיים, על מנת להבין בצורה ברורה יותר את העניין.

[sts]

<form method="post" style="position:absolute; left: 442px; top: 118px; width: 78px;">
<input name="browse" type="file" class="upload-select" />
<input name="upload" type="image" src="images/uploadbutton.gif">
</form>

.upload-select {
	background-image:url("images/selectfile.gif");
	width:75px;
	height:30px;
	position:absolute;
	left: 82px;
	top: 1px;
}

וזה מה שרואים



אני רוצה להחליף את הכפתור "עיון..." בכפתור שאני עיצבתי שה-class שלו זה upload-select
איך אני עושה את זה?

[dor77]

http://www.ryboe.com/2007/01/07/usin...it-button.html

בהצלחה (:

[Erez | TrustMedia.co.il]

לא חושב שזה אפשרי,אבל אתה יכול לעשות תיבת העלאת קובץ בפלאש ואז לעצב איך שבאלך