CODEWITHSUNDEEP
htmlcssdrop-down-menumicrosoft-edge
Devarsh Bhatt
Devarsh Bhatt

Reputation: 74

Having issues in DropDown Menu while checking in Microsoft Edge

So I have created a register form using html and css and it works fine but i have some issues with the drop-down menu in the blood group section while checking it using Microsoft Edge.

So if i run this on Chrome browser it works fine, However when i tried to run this on Microsoft Edge or IE 8 it shows some white bars on the starting and ending of the drop-down list.

I attached both the HTML code and CSS code in the snippet below:

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: #34495e;
  }
  .box{
    width: 300px;
    padding: 40px;
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%,-40%);
    background: #191919;
    text-align: center;
  }
  .box h1{
    color: white;
    text-transform: uppercase;
    font-weight: 500;
  }
  
  select > option{
    background: #191919;
    color: white;
  }
  
  .box textarea{
    height: 75px;
  }
  
  .box label[for="Male"],
  .box label[for="Male"] + input,
  .box label[for="Female"],
  .box label[for="Female"] + input,
  .box label[for="Other"],
  .box label[for="Other"] + input,
  .box input[type = "radio"] {
    display: inline;
    clear: none;
    width: auto;
  }
  
  
  .box input[type = "text"],.box input[type = "password"], .box select, .box input[type = "tel"], .box textarea, .box fieldset,
  .box input[type = "radio"], .box input[type = "email"]{
    border:0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #3498db;
    padding: 14px 10px;
    width: 200px;
    outline: none;
    color: white;
    border-radius: 24px;
    transition: 0.25s;
  }
  .box input[type = "text"]:focus,.box input[type = "password"]:focus,.box select:focus, .box input[type = "tel"]:focus,
   .box textarea:focus, .box input[type = "email"]:focus{
    width: 280px;
    border-color: #2ecc71;
  }
  .box input[type = "submit"]{
    border:0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #2ecc71;
    padding: 14px 40px;
    outline: none;
    color: white;
    border-radius: 24px;
    transition: 0.25s;
    cursor: pointer;
  }
  .box input[type = "submit"]:hover{
    background: #2ecc71;
  }
  
  .box input[type="radio"] {
    display: inline;
    width: auto;
  }
  
  fieldset label {
    margin-right: 5px;
  }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Student-css.css">

</head>
<body>  
  
<form class="box" method="POST"  action="test.html">

  <h1>Student Registration</h1>
    <!-- First Name -->
  <input type="text" name="Fname" placeholder="First Name" required>
    <!-- Middle Name -->
  <input type="text" name="Mname" placeholder="Middle Name" required>
    <!-- Last Name -->
  <input type="text" name="Lname" placeholder="Last Name" required>
    <!-- Moblie Number -->
  <input type="tel" name="Mnumber" placeholder="Mobile Number" pattern="[0-9]{10}" required>
    <!-- Parent's Number -->
  <input type="tel" name="Pnumber" placeholder="Parents Number" pattern="[0-9]{10}" required>
    <!-- Address -->
  <textarea name="Address" placeholder="Address" maxlength="500" required></textarea>
    <!-- City -->
  <input type="text" name="City" placeholder="City" required>
    <!-- Branch -->
  <select required id="Branch" name="Branch">
    <option value="" selected="selected">Branch</option>
    <option value="AutoMobile" >AutoMobile</option>
    <option value="Civil" >Civil</option>
    <option value="Computer" >Computer</option>
    <option value="Electrical" >Electrical</option>
    <option value="Mechanical" >Mechanical</option>
    </select>
    <!-- Enrollment Number -->
  <input type="tel" name="Enroll" placeholder="Enrollment Number" pattern="[0-9]{12}" required>
    <!-- Gender -->
  <fieldset>
        <legend>Gender</legend>
         <label for="Male"><input type="radio" name="Gender" required value="Male"> Male</label>
         <label for="Female"><input type="radio" name="Gender"  value="Female"> Female</label>
        <label for="Other"><input type="radio" name="Gender"  value="Other"> Other </label>
        </fieldset>
        <!--E-mail Address -->
        <input type="email" name="email" placeholder="E-mail Address" required>
        <!-- Password -->
        <input type="password" name="pass" placeholder="Password" required>
        <!--Blood Group -->
  <select id="Blood Group" name="Blood Group">
    <option value="" selected="selected">Blood Group</option>
    <option value="A+" >A+</option>
    <option value="B+l" >B+</option>
    <option value="AB+" >AB+</option>
    <option value="O+" >O+</option>
    <option value="A-" >A-</option>
    <option value="B-" >B-</option>
    <option value="AB-" >AB-</option>
    <option value="O-" >O-</option>
    </select>
    <!--Submit Button -->
  <input type="submit" name="" value="Submit">

</form>
</body>
</html>

Help would be appreciated.

Upvotes: 0

Views: 2300

Answers (1)

Jenifer Jiang
Jenifer Jiang

Reputation: 381

The setting of padding attribute in .box select has caused the result in IE/Edge. I've tested on my side and I've found that defining .box select's style separately maybe a choice. The related part of CSS.

    .box input[type = "text"], .box input[type = "password"], .box input[type = "tel"], .box textarea, .box fieldset,
    .box input[type = "radio"], .box input[type = "email"] {
        border: 0;
        background: none;
        display: block;
        margin: 20px auto;
        text-align: center;
        border: 2px solid #3498db;
        padding: 14px 10px;
        width: 200px;
        outline: none;
        color: white;
        border-radius: 24px;
        transition: 0.25s;
    }
    .box select {
        border: 0;
        background: none;
        display: block;
        margin: 20px auto;
        text-align: center;
        border: 1px solid #3498db;
        padding: 0px 10px;
        width: 200px;
        outline: none;
        color: white;
        border-radius: 24px;
        transition: 0.25s;
    }

The result in IE/Edge

Upvotes: 1

Related Questions