انشاء قائمة منسدلة ب CSS3

غالبا نستخدم اكواد HTML فى انشاء قائمة منسدلة اما لموقعك او المدونة ولكن قد تجد هذه القائمة عادية وترغب فى التعديل عليها واى تعديل...

غالبا نستخدم اكواد HTML فى انشاء قائمة منسدلة اما لموقعك او المدونة ولكن قد تجد هذه القائمة عادية
وترغب فى التعديل عليها واى تعديل يمكنك القيام به عن طريق اكواد CSS3 

مثال للقائمة المنسدلة العادية :

Everything Widgets Tutorial CSS3 jQuery

هذا كود HTML: 

<select>
<option> Everything </option>
<option> Widgets </option>
<option> Tutorial </option>
<option> CSS3 </option>
<option> jQuery </option>
</select>

تعتبر هذه القائمة بسيطة جدا، ومملة وأساسية. هناك عناصر معينة من مربع محدد ولكن يمكننا تغيير لون الخط، الحدود، 
 اللون، والخلفية:


تظل القائمة على نفس الشيء. ولا توجد وسيلة مباشرة للقيام بتغيير ، ولكن الحل بسيط جدا.
يجب اولا ان نحدد ونحيط كود القائمة المنسدلة بdiv مثل التالى :

<div class="styled-select">
<select>
<option> Everything </option>
<option> Widgets </option>
<option> Tutorial </option>
<option> CSS3 </option>
<option> jQuery </option>
</select>
</div>

---
والان نقم باضافة كود CSS3

<style>
.styled-select {
width: 228px;
height: 34px;
overflow: hidden;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitfEx5a9ncR9WYqOr67v1woXZlKYl8Y8b-UXWNuUQDB46ks3j3auDhR2FxviH0Q49C_6Z4sTMx_LfWCXws8rN9_MiU8uouniIUDW149kLEtms2n0DA0CgBj9fJOpIzEF1Al0nsPZqk4Ns/s1600/Select.png) no-repeat ;
border-radius: 10px;
}
.styled-select select {
background: transparent;
width: 228px;
padding: 5px;
border: 1px solid #CCC;
font-size: 16px;
height: 34px;
font-weight: bold;
outline:0px;
-webkit-appearance: none;
border-radius: 10px;
}
.styled-select option {
background: lightgrey;
width: 228px;
padding: 5px;
border: 1px solid #CCC;
font-size: 16px;
height: 34px;
outline:0px;
-webkit-appearance: none;
}
</style>

ستظهر بالشكل التالى :


وبهذا الحل يجعل من الاسهل تغيير شكل القائمة المنسدلة ولن يكون بأى شئ اخر سوى باستخدام كود CSS3 .