PDA

View Full Version : سوال: تغيير ظاهر دكمه browse


Spring_64
پنج شنبه 19 اسفند 1389, 12:23 عصر
سلام
من مي خوام دكمه browse در تگ

<input id="File1" type="file" />
رو خودم استايل بدم.
ممكنه راهنمايي كنيد؟!
tux-world
پنج شنبه 19 اسفند 1389, 13:58 عصر
از این استایل استفاده کنید توجه کنید که برای فایرفاکس و کروم جواب میده

.button_red {
background: #c63929;
background: -moz-linear-gradient(0% 100% 90deg, #891100 0%, #B51700 50%, #c63929 50%, #EE432E 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #ee432e), color-stop(0.5, #c63929), color-stop(0.5, #b51700), color-stop(1, #891100));
border: 1px solid #951100;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333;
-webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333;
box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333;
color: #fff;
font-family: Tahoma;
font-size: 11px;
font-weight: none;
padding: 12px 0 14px 0;
text-align: center;
text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
width: 150px;
height:40px;
}
Spring_64
پنج شنبه 19 اسفند 1389, 14:19 عصر
ممنون، اما اين ففط رنگ قسمت text رو عوض ميكنه من مي خوام براي دكمه اش يه عكس بذارم...
eleboys
جمعه 20 اسفند 1389, 03:50 صبح
ممنون، اما اين ففط رنگ قسمت text رو عوض ميكنه من مي خوام براي دكمه اش يه عكس بذارم...
این بنده خدا 100 خط کد نوشته شما میگی فقط رنگش عوض شد؟؟ :قهقهه: بگذریم/

اگر قصدت فقط استایل دادن باشه بهتره ابتدا یک کلاس درست کنی و بعد به هر دکمه ای که می خوای این کلاس رو بدی. به نظر من بهتره برای استایل دکمه از عکس استفاده نکنی و با استفاده از استایل های موجود (border, background-color, gradiant,...) یک کلاس شیک تولید کنی. اما اگر واقعا می خوای از عکس استفاده کنی باید از استایل background استفاده کنی به روش زیر (استایلی که برای دکمه های همین فروم استفاده شده)

.button{
url("http://barnamenevis.org/images/gradients/generic_button.png") repeat-x scroll left top #E9E9E9
}
.button:hover{
/* هر استایلی اینجا بنویسی زمانی که ماوس روی دگمه میره فعال میشه و وقتی کنار بره دوباره به حالت قبلی بر میگرده (جهت زیبایی)
میتونی اصلا این کلاس رو ننویسی */
}

و کد دگمه:
<input id="btnTest" class="button" type="submit"/>
Spring_64
شنبه 21 اسفند 1389, 08:32 صبح
سلام
فكر كنم من نتونستم منظورم رو برسونم:گریه:

من منظورم type=fle است و تمام اين استايلها قسمتي رو كه آدرس نوشته مي شود رو تغيير مي دهند نه دكمه اش را


<input id="File1" type="file" />


اگر فقط دكمه با type=submit در نظر بود جواب شما دوستان درست بود اما مساله چيز ديگريست...
جستجويي كه من انجام دادم فهميدم با jquery مي توان اين كار رو انجام داد اما خب زياد به نتيجه نرسيدم ممنون مي شم اگر دوستان اطلاعاتي در اين زمينه به من بدهند.
Spring_64
سه شنبه 24 اسفند 1389, 08:55 صبح
من مشكلم حل شد::لبخند:


<html>
<head>
<title>File Upload Example</title>
<script language="JavaScript" type="text/javascript">
function HandleFileButtonClick()
{
document.frmUpload.myFile.click();
document.frmUpload.txtFakeText.value = document.frmUpload.myFile.value;
}
</script>
</head>
<body>
<form name="frmUpload">
<!-- Real Input field, but hidden-->
<input type="file" name="myFile" style="display: none">
<!-- Fake field to fool the user -->
<input type="text" name="txtFakeText" readonly="true">
<!-- Button to invoke the click of the File Input -->
<input type="button" onclick="HandleFileButtonClick();" value="Upload File" style="background-image: url('../Images/btn_class/bkg.png');">
</form>
</body>
</html>

مرجع:http://imar.spaanjaars.com/QuickDocId.aspx?quickdoc=154