ورود

View Full Version : دو استایل متفاوت برای select در یک فرم


hamed-php
سه شنبه 13 تیر 1391, 11:25 صبح
با سلام

یک فرم که حاوی چند تا select هست رو دارم میسازم

یک استایل کلی برای select در نظر گرفتم



.form select {
display : block;
margin-bottom: 5px;
}



حالا میخوام سه تا از select هام که مربوط به انتخاب تاریخ تولد شامل سال ماه و روز هست بصورت بلاک (زیر هم) نباشه و کنار هم ردیف بشه (افقی)
چجوری این کار رو کنم؟ چجوری بگم این 3 تا select بصورت relative باشند؟

با تشکر
bftarane
سه شنبه 13 تیر 1391, 15:28 عصر
float:right
رو به کدهاتون اضافه کنید.
من کدهای زیر رو نوشتم و امتحان کردم جواب داد.

<html>
<head>
<style>
form select {
display : block;
margin-bottom: 5px;
float:right;
}
</style>
</head>
<body>
<form>
<select>
<option>سال
</option>
</select>
<select>
<option>ماه
</option>
</select>
<select>
<option>روز
</option>
</select>
</form>
</body>
</html>
در ضمن اون نقطه قبل از form رو هم برداشتم.
hamed-php
شنبه 17 تیر 1391, 12:45 عصر
سلام

مشکل حل نشد همچنان - همونطور که عرض شد استایلهای مختلف رو در یک فرم میخوام برای select های موجود در آن بکار بگیرم
مثلاً یک سری از سلکت ها عمودی و یک سریشون افقی در کنار هم باشند
bftarane
شنبه 17 تیر 1391, 14:17 عصر
سلام.
کدهای زیر رو در Notepad بنویسید و با پسوند html ذخیره کنید و نتیجه رو ببینید.

<html>
<head>
<style>
form select#one {
display : block;
margin-bottom: 5px;
color:blue;
}
form select#one option#green
{
color:green;
}
form select#two
{
display : block;
margin-bottom: 5px;
color:red;
}
</style>
</head>
<body>
<form>
<select id=one>
<option>
red
</option>
<option>
blue
</option>
<option id=green>
green
</option>
<option>
yellow
</option>
</select>
<select id=two>
<option>
flower
</option>
<option>
perfume
</option>
</select>
<select>
<option>year
</option>
</select>
<select>
<option>month
</option>
</select>
<select>
<option>day
</option>
</select>
</form>
</body>
</html>اگه بازم اون چیزی نبود که شما می خواستید مطرح کنید شاید بقیه دوستان راهنمایی کنن.
همونطور که می بینید در کد دو تا سلکت هستند که id های مختلف دارن. آی دی اولی one و آدی دومی two.
برای افقی قرار گرفتن روز ماه سال هم راهی پیدا نکردم جز اینکه سه تا سلکت مختلف ایجاد کنم نتونستم با یه سلکت و سه آپشن این کار رو انجام بدم نمی دونم اصلاً امکان پذیر هست یا نه.
حالا به فرض اگه خواستید این سلکت ها سمت راست باشن نه چپ (ماه سال روز) می تونید اونا رو داخل یه دیو قرار بدید و کلاس زیر رو به اون دیو اختصاص بدید.
.horizontalselects
{
float:right;
}