JAYASWAROOP commited on
Commit
e89aae7
1 Parent(s): 5c19f8f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +44 -5
index.html CHANGED
@@ -362,8 +362,7 @@ button:hover {
362
  }
363
 
364
  .downloads-options {
365
- display: flex;
366
- justify-content: space-between;
367
  align-items: center;
368
  margin-bottom: 20px;
369
  }
@@ -422,6 +421,44 @@ button:hover {
422
  .download-button:hover {
423
  background-color: #2980b9;
424
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
425
 
426
  </style>
427
  </head>
@@ -468,17 +505,19 @@ button:hover {
468
  <div class="downloads">
469
  <div class="downloads-options">
470
  <input type="text" id="search" placeholder="Search...">
471
- </div>
472
- <div>
473
- <select id="sort">
474
  <option value="recent">Sort by Recent</option>
475
  <option value="name">Sort by Name</option>
476
  <option value="artist">Sort by Artist</option>
477
  </select>
478
  </div>
 
 
479
  <div class="downloads-list">
480
  <div class="download-item">
481
  <img src="https://i.pinimg.com/originals/24/ea/ea/24eaea94a992b462b99f64aec083bd7e.png" alt="Album 1 Cover">
 
482
  <div class="download-info">
483
  <h4>Album 1</h4>
484
  <h5>Artist: Arijit Singh</h5>
 
362
  }
363
 
364
  .downloads-options {
365
+
 
366
  align-items: center;
367
  margin-bottom: 20px;
368
  }
 
421
  .download-button:hover {
422
  background-color: #2980b9;
423
  }
424
+ /* Styling for Select Tag with Fixed Size */
425
+
426
+ /* Assuming a fixed width and height */
427
+ .select-custom {
428
+ width: 200px; /* Adjust as needed */
429
+ height: 40px; /* Adjust as needed */
430
+ appearance: none;
431
+ -webkit-appearance: none;
432
+ -moz-appearance: none;
433
+ padding: 10px;
434
+ font-size: 16px;
435
+ border: 1px solid #ccc;
436
+ border-radius: 5px;
437
+ background-color: #fff;
438
+ /* Add your additional styling */
439
+ }
440
+
441
+ /* Styling for the dropdown arrow */
442
+ .select-custom::after {
443
+ content: '\25BC'; /* Unicode for down arrow */
444
+ position: absolute;
445
+ top: 50%;
446
+ right: 10px;
447
+ transform: translateY(-50%);
448
+ pointer-events: none;
449
+ }
450
+
451
+ /* Styling for the dropdown list */
452
+ .select-custom option {
453
+ background-color: #fff;
454
+ color: #333;
455
+ }
456
+
457
+ /* Hover effect on options */
458
+ .select-custom option:hover {
459
+ background-color: #f9f9f9;
460
+ }
461
+
462
 
463
  </style>
464
  </head>
 
505
  <div class="downloads">
506
  <div class="downloads-options">
507
  <input type="text" id="search" placeholder="Search...">
508
+ <div>
509
+ <select id="sort" class="select-custom">
 
510
  <option value="recent">Sort by Recent</option>
511
  <option value="name">Sort by Name</option>
512
  <option value="artist">Sort by Artist</option>
513
  </select>
514
  </div>
515
+ </div>
516
+
517
  <div class="downloads-list">
518
  <div class="download-item">
519
  <img src="https://i.pinimg.com/originals/24/ea/ea/24eaea94a992b462b99f64aec083bd7e.png" alt="Album 1 Cover">
520
+
521
  <div class="download-info">
522
  <h4>Album 1</h4>
523
  <h5>Artist: Arijit Singh</h5>