Change background color and styles in Drop-down list using CSS
Live Preview:
We recreated the drop down list in html using CSS styles by putting the radius property and colour property. We also added the hover effect to change the colour of the background of the dropdown list while entering of the mouse. The working of this dropdown list is given below as a video.
Video Preview:
Video Preview:
As in the video,I hive create a drop down list with hover effect changing the colour blue to black while the cursor enter into the dropdown division. The code of the dropdown district is given below in the box. Try to code now.
<html> <head><title>dropdown list by cspsyco</title> <style> .border { border:2px solid black; width:220px; height:180px; border-radius:10px; padding:10px; } .h4 { color:white; } .select { display:block; background-color:lightgreen; border-radius:5px; border-color:black; width:150px; height:30px; } .option { background-color:lightblue; } .form { background-color:#3033dd; width:200px; height:150px; border-radius:10px; } .form:hover { background-color:#100000; </style> </head> <body><center> <br><br><br><br><br> <div class=border> <br> <div class=form><br> <form><H4 class=h4>DROP DOWN</H4><br> <select class=select> <option value="#" class=option>--Select one--</option> <option value="#" class=option>Google1</option> <option value="#" class=option>Google2</option> <option value="#" class=option>Google3</option> </select> </form></div> </center> </div> </body> </html> |
This comment has been removed by the author.
ReplyDeleteYe comment box kesey set kta tum nei batao
ReplyDelete