时间戳

首页 > 解决方案 > 签入 Microsoft Edge 时下拉菜单出现问题

html - 签入 Microsoft Edge 时下拉菜单出现问题

问题描述

因此，我使用 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>

帮助将不胜感激。

标签： htmlcssdrop-down-menumicrosoft-edge

解决方案

.box select中padding属性的设置导致了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;
    }

IE/Edge 中的结果

推荐阅读