הוסטס - פורום אחסון האתרים הגדול בישראל

הוסטס - פורום אחסון האתרים הגדול בישראל (https://hosts.co.il/forums/index.php)
-   פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)
-   -   איך אפשר לעצב את input type="file" (https://hosts.co.il/forums/showthread.php?t=74479)

sts 13-05-09 02:44
איך אפשר לעצב את input type="file"
 
אני שעהה מנסה שעה לא מצליח
מישהו פה יודע איך?

SniR-S 13-05-09 07:55
אתה יכול בכל מיני דרכים,
ראשונה, אתה מוסיף לו את הקוד הבא:
HTML קוד:
style="background-color: #666;"
דרך נוספת זה לקבוע אותו כאלמנט class מסויים, ואז להגדיר אותו ב css, לדוגמא:
HTML
HTML קוד:
class="uploadfile"
CSS
HTML קוד:
.uploadfile {
background-color: #666;
}
אתה יכול לקבוע את input בכללי כעיצוב משלך ב CSS ..
ויש עוד דרכים, אבל בעיקרון זה ככה..

Scolpy 13-05-09 09:06
הנה כמה דוגמאות לעיצוב כפתורים עם שימוש בגליונות CSS(תקן XHTML 1.1 STRICT):
1)
HTML קוד:
input[type="file"]{
    border: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}
2)

HTML קוד:

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

HTML קוד:

input[type="file"] {
    background: url('input_background.png') repeat-x;
    border: 1px solid #fff;
    height: 10px;
    padding: 0 3px 0 3px;
}
כמובן שישנן עוד וריאציות, אך זה בכללי :)

בהצלחה!

sts 13-05-09 09:25
את כל אלה אני יודע איך לעשות
אבל אני רוצה לעשות את הכפתור של "עיון..." כתמונה שלי שאני עיצבתי
ואת שורת הטקסט להשאיר איך שהיא

SniR-S 13-05-09 10:02
HTML קוד:
<input type="image" src="image.gif" name="image" width="60" height="30">

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

IsraKal.co.il 13-05-09 10:37
ציטוט:
נכתב במקור על ידי sts (פרסם 714689)
לא עובד
כשאתה עושה <input type=tile>
אז אתה מקבל 2 דברים
כפתור "עיון..."
ושורת טקסט ששם כתוב הקובץ שבחרת
עכשיו כשאני עשיתי <input type="file" class="myclass"> אז הוא יוצא דפוק כזה
איך אפשר לעצב רק את הכפתור ולא את השורת טקסט
תעתיק לכאן את שורת הקוד הקיים, על מנת להבין בצורה ברורה יותר את העניין.

sts 13-05-09 11:12
HTML קוד:
<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>
HTML קוד:
.upload-select {
        background-image:url("images/selectfile.gif");
        width:75px;
        height:30px;
        position:absolute;
        left: 82px;
        top: 1px;
}
וזה מה שרואים
http://up73.siz.co.il/up2/jmnzmtxeind4.jpg


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

dor77 13-05-09 14:08
http://www.ryboe.com/2007/01/07/usin...it-button.html

בהצלחה (:

Erez | TrustMedia.co.il 13-05-09 14:16
לא חושב שזה אפשרי,אבל אתה יכול לעשות תיבת העלאת קובץ בפלאש ואז לעצב איך שבאלך

sts 13-05-09 14:17
זה לא מה שרציתי אני רוצה להחליף את הכפתור עיון...
רק את הכפתור הזה

intercooler3819 13-05-09 17:46
ציטוט:
נכתב במקור על ידי Scolpy (פרסם 714683)
הנה כמה דוגמאות לעיצוב כפתורים עם שימוש בגליונות CSS(תקן XHTML 1.1 STRICT):
1)
HTML קוד:
input[type="file"]{
    border: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}
2)

HTML קוד:

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

HTML קוד:

input[type="file"] {
    background: url('input_background.png') repeat-x;
    border: 1px solid #fff;
    height: 10px;
    padding: 0 3px 0 3px;
}
כמובן שישנן עוד וריאציות, אך זה בכללי :)

בהצלחה!
התקן שלך קצת שגוי חח מה שכתבת תקף בדפדפנים תומכי CSS3 (זה סלקטורים של CSS3) בלי קשר לתקן XML שבו אתה משתמש


בנוגע לשאלת פותח האשכול
מניסיון עבר - הדרך הכי טובה לעצב FILE INPUT כזה היא לממש את כל הFILE UPLOADING עם FLASH וAJAX ככה יש לך מקסימום נגישות
אם תרצה לעצב את זה חד פעמית יש הרבה קומבינציות בCSS3 וגם בCSS2 עם תמיכה חלקית ביותר בדפדפנים

מה שאני הייתי עושה זה מתפשר על העיצוב הרגיל חבל לבזבז את הזמן

Elad-A 14-05-09 14:42
http://www.quirksmode.org/dom/inputfile.html

בהצלחה.

mayden 14-05-09 23:37
מקסימום תוכל לעשות:
PHP קוד:
<img src=.. onclick="document.form_name.submit();"> 

אדיר 15-05-09 02:43
ציטוט:
נכתב במקור על ידי mayden (פרסם 715009)
מקסימום תוכל לעשות:
PHP קוד:
<img src=.. onclick="document.form_name.submit();"> 
כאחד שראיתי שמוחק ומביא מעל ומעבר אזהרות על "אי כיבוד דרישת פותח האשכול",
נדמה כאילו די לא קראת מה הוא ביקש..

אז בבקשה, שים לב שכולם טועים לפעמים.

yard2010 15-05-09 19:39
רק תזכור, שאתה לא יכול לעשות FIRE ל-event של הלחיצה על כפתור העלאה (אתה לא יכול לדמות בעצם לחיצה את הפקד הספציפי הזה בFF בשל בעיות אבטחה)
יש תוספים ל-JQUERY שעושים את זה טוב מאוד, תקרא על זה, זה שווה את הזמן.

Elad-A 16-05-09 20:19
לפותח האשכול, תשים לב למה שכתבתי למעלה.
זה הפיתרון בשבילך.

sholaman 17-05-09 06:14
אני זוכר שהייתי תקוע באותה בעייה לפני כשנתיים - שלוש משו כזה.
אף אחד לא היה יכול לעזור ובכל הרשת הדבר היחיד שמצאתי זה פיתרון כמו שאלעד הביא פה.
בכל מקרה אני בסוף ויתרתי על העניין כי זה לא היה ברמה מושלמת, זה לא אפשרי בCSS, HTML בכל מקרה, חייבים לערב פלאש בשביל לקבל משו רציני.

בהצלחה.


כל הזמנים הם GMT +2. הזמן כעת הוא 17:22.

מופעל באמצעות VBulletin גרסה 3.8.6
כל הזכויות שמורות ©
כל הזכויות שמורות לסולל יבוא ורשתות (1997) בע"מ