رفتن به مطلب

تغییر رنگ فیلد دیدگاه


پست های پیشنهاد شده

با سلام خدمت دوستان

فیلد دیدگاههای من کدهای زیر میباشد میخوام وقتی بازدید کننده هنگام نوشتن نظر؛ بمحض اینکه شروع به تایپ میکنه رنگ فیلد از رنگ #E8E8E8 به رنگ #f8d9d9 تغییر کنه یعنی تغییر رنگ background فیلد

کد فیلدها:


<input type="text" name="author" id="author" placeholder="*نام (ضروری)" title="لطفا فارسی تایپ نمائید" size="35" tabindex="1" />
<br />
<input type="text" name="email" id="email" placeholder="*ایمیل (نمایش داده نمی شود) (ضروری)" size="35" tabindex="2" />
<br />
<input type="text" name="url" id="url" placeholder="وبلاگ / وب‌سایت(اختیاری)" size="35" tabindex="3" />

ویرایش شده توسط YOU
لینک به ارسال

کد فیلدها؟

متاسفانه هنگان ارسال مطلب ابتدا ویرایشگر ساده دارم باید ارسال کنم بعد ویرایشگر را بزنم تا چیزی پیوست نمایم یا کدی بنویسم

الان کدها را گذاشتم

لینک به ارسال

خاصیت focus


.comment input[type="text"]{
color:#E8E8E8;
}
.comment input[type="text"]:focus{
color:#f8d9d9;
}

لینک به ارسال

خاصیت focus


.comment input[type="text"]{
color:#E8E8E8;
}
.comment input[type="text"]:focus{
color:#f8d9d9;
}

تغییرات را اعمال کردم نشد اینم css خودم


input, button, textarea, option, select{
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
padding: 2px;
border: 1px solid #DDDDDD;
border-radius: 2px;
color: #666666;
-moz-transition: all 0.3s linear 0s;
background: #E8E8E8;
margin: 2px;
border-right: 5px solid #ccc;
}

به این صورت هم انجام دادم ولی بعد از رفتن به فیلد بعدی رنگش به حالت قبلی برمیگرده من میخوام بعد تایپ یعنی فیلد پر باشه رنگش عوض بشه


#email:focus , #author:focus,#url:focus{
background-color:#fbd3ec;
border-top-left-radius:7px;
border-right: 5px solid #fbd3ec;
margin-right:10px;
}

ویرایش شده توسط YOU
لینک به ارسال

یک مثال:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
function InputHighLight(id,col){
var obj=document.getElementById(id)||document;
var ips=obj.getElementsByTagName('INPUT');
this.ary=[];
for (var z0=0;z0<ips.length;z0++){
if (ips[z0].type=='text'){
this.addevt(ips[z0],'blur','HighLight');
this.ary.push(ips[z0]);
}
}
this.col=col||'#FFE4E1';
}
InputHighLight.prototype.HighLight=function(){
for (var ip,z0=0;z0<this.ary.length;z0++){
ip=this.ary[z0];
ip.style.backgroundColor=ip.value.replace(/\s/g,'')!=''?this.col:'transparent';
}
}
InputHighLight.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}

/*]]>*/
</script></head>
<body onload="IP=new InputHighLight(null,'#FFE4E1');">
<input name="" />
<input name="" />
<input type="button" name="" value="TEST" onclick="IP.HighLight();" />
</body>
</html>

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...