Возникли проблемы в DropDown Menu при проверке в Microsoft Edge - PullRequest
Новая
       10

Возникли проблемы в DropDown Menu при проверке в Microsoft Edge

0 голосов
/ 02 января 2019

Итак, я создал регистрационную форму, используя html и css, и она отлично работает, но у меня есть некоторые проблемы с выпадающим меню в разделе группы крови при проверке с помощью Microsoft Edge.

Так что, если я запускаю это в браузере Chrome, он работает нормально, однако, когда я пытался запустить это в Microsoft Edge или IE 8, он показывает некоторые белые полосы в начале и конце раскрывающегося списка.

Я прикрепил HTML-код и CSS-код во фрагменте ниже: 

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>

Помощь будет оценена.

1 Ответ

0 голосов
/ 03 января 2019

Установка атрибута padding в .box select вызвала результат в IE / Edge.Я проверил на своей стороне, и я нашел, что определение стиля .box select отдельно, возможно, выбор.Связанная часть 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

...