بک گراندهای مجزا برای Input ها

Ali 59 · Nov 28, 2007

سلام

یه تکست باکس دارم که بهش SwapInput دادم
حالا یه دکمه دارم که میخوام یه SwapInput مجزای دیگه بهش بدم (طوری که بک گراند مشکی دکمه بشه مثلا آبی)

لطفا راهنمایی بفرمایید
سپاس

HTML:

<style>
input {
	background:pink url('') ;
}
.sawpInput {
	background:white url('') ;
}
</style>

<input type="text" id="search" name="sw" size="12" style="border:0 none;" onclick="this.className='sawpInput'">

<input type="submit" value="      " id="se" style="cursor: hand; border:0; background: black">

echessdesign · Nov 28, 2007

ارادتمندم علی جان، به از این طرفها
شما کافیه برای حالتی که در نظر داری (onclick, onmouseover, onmouseout,...) یک Class جدید ،با مشخصات مورد نظر خودت رو قرار بدی:

HTML:

<style type="text/css">
input {
	background:pink;
}
.sawpInput {
	background:white;
}
.echess {
	background:green;
}
</style>

سپس آن رو اعمال کنید:

HTML:

<input type="text" id="search" name="sw" size="12" style="border:0 none;" onclick="this.className='sawpInput'" />

<input type="submit" value="      " id="se" style="cursor: hand; border:0; background: black" />
<input type="text" id="search" name="sw" size="12" style="border:0 none;" onclick="this.className='echess'" />

اگر پرسشی هست در خدمتم، پاینده باشید.

Ali 59 · Nov 28, 2007

ممنون حسین جان مثل همیشه شرمنده کردی.. دم شما گرم

مشکلم اینه که میخوام بک گراند این دو تا تکست باکس رنگشون متفاوت باشه.. الان هر دو صورتی هستن.. میخوام یکیشون صورتی باشه و دیگری مثلا آبی (بعبارتی میخوام دو تا بک گراند برای Input تعریف کنم) ... میشه همچنین کاری کرد؟

زنده باشی

echessdesign · Nov 28, 2007

ارادتمندم علی جون
کافیه که شما برای هر Input ، یک Class مجزا در نظر بگیرید:

HTML:

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 3</title>
<style>
input {
	background:pink;
}
.sawpInput {
	background:white;
}
.echess1 {
	background:aqua;
}
.echess2 {
	background:green;
}
ali1 {
	background:blue;
}
ali2 {
	background:fuchsia;
}
</style>
</head>

<body>
<form>

<input type="text" id="search" name="sw" size="12" style="border:0 none;" onclick="this.className='sawpInput'" />

<input type="text" id="search" name="sw" size="12" style="border:0 none;" class="echess1" onclick="this.className='echess2'" />
<input type="text" id="search" name="sw" size="12" style="border:0 none;" class="ali1" onclick="this.className='ali2'" />

</form>
</body>

</html>

اگر توضیح واضح ندادم بفرمایید، پاینده باشید.