Question

li.dropdown {
  display: inline-block;
  width: 350px;
  padding: 0px 0px;
}

li.dropdown1 {
  display: inline-block;
  width: 150px;
  padding: 0px 0px;
}

.dropbtn {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 0px 0px;
  text-decoration: none;
}

.dropbtn1 {
  display: inline-block;
  color: white;
  text-align: left;
  padding: 0px 60px;
  text-decoration: none;
}

.dropdown-content {
  color: black;
  display: none;
  position: absolute;
  background: rgb(255, 255, 255) !important;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: black
}

.dropdown:hover .dropdown-content {
  display: block;
}

<li class="dropdown1 dropdown">
  <a href="javascript:void(0)" class="dropbtn lang FelvIcon" key="Felvétel">Felvétel</a>
  <div class="dropdown-content">
    <form action="/login" method="POST" class="login" autocomplete="off">
      <h1 class="login-title lang" key="Tag Felvétel">Tag felvétel</h1>
      <input autocomplete="new-password" id="szias" type="text" name="username" class="form-control" placeholder="Új tag neve" autofocus>
      <input autocomplete="new-password" id="ujtag" type="password" name="password" class="form-control" placeholder="Mester Jelszó">
      <input type="submit" value="Save" class="login-button">
    </form>
    <!-- <div class="szintek"><br>-->
    <strong><div class="lang" key="Valassz">
						Válassz szintet az új tagnak:
						</div></strong>
    <input type="radio" name="Button" class="ButtonState" id="Button1" onclick="sendData(1)" value="1" />
    <label class="Button" for="Button1">1</label>

    <input type="radio" name="Button" class="ButtonState" onclick="sendData(2)" id="Button2" value="2" />
    <label class="Button" for="Button2">2</label>

    <input type="radio" name="Button" class="ButtonState" onclick="sendData(3)" id="Button3" value="3" />
    <label class="Button" for="Button3">3</label>
    <div id="myDIV"> </div>
  </div>
</li>

我在填写表单字段内的输入字段时遇到了严重的问题。当我用鼠标单击输入时，出现了一些以前写的输入字符串，如果我想单击其中一个，则整个下拉选项卡都将关闭。我知道其中一个存在问题CSS元素，但我找不到它。这是我的代码。

<!DOCTYPE html>
<html>
<head>
<style> 
li.dropdown {
    display: inline-block;
    width: 350px;
    padding: 0px 0px;
  }
  li.dropdown1 {
    display: inline-block;
    width: 150px;
    padding: 0px 0px;
  }
  .dropbtn {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 0px 0px;
    text-decoration: none;
  }
  .dropbtn1 {
    display: inline-block;
    color: white;
    text-align: left;
    padding: 0px 60px;
    text-decoration: none;
  }
  .dropdown-content {
    color:black;
    display: none;
    position: absolute;
    background:rgb(255, 255, 255) !important;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  .dropdown-content a:hover {
    background-color: black
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }
</style>
</head>
<body>
<li class="dropdown1 dropdown">
<a href="javascript:void(0)" class="dropbtn lang FelvIcon" key="Felvétel">Felvétel</a>
<div class="dropdown-content">
                        <form action="/login" method="POST" class="login" autocomplete="off">
                        <h1 class="login-title lang" key="Tag Felvétel">Tag felvétel</h1>
                        <input autocomplete="new-password" id="szias" type="text" name="username" class="form-control" placeholder="Új tag neve" autofocus>
                        <input autocomplete="new-password" id="ujtag" type="password" name="password" class="form-control" placeholder="Mester Jelszó">
                        <input type="submit" value="Save" class="login-button">
                        </form>
                        <!-- <div class="szintek"><br>-->
                        <strong><div class="lang" key="Valassz">
                        Válassz szintet az új tagnak:
                        </div></strong>
                        <input type="radio" name="Button" class="ButtonState" id="Button1" onclick="sendData(1)" value="1" />
                        <label class="Button" for="Button1">1</label>

                        <input type="radio" name="Button" class="ButtonState" onclick="sendData(2)" id="Button2" value="2" />
                        <label class="Button" for="Button2">2</label>

                        <input type="radio" name="Button" class="ButtonState" onclick="sendData(3)" id="Button3" value="3" />
                        <label class="Button" for="Button3">3</label>
                        <div id="myDIV"> </div>
                        </div>
                        </li>
</body>
</html>

<input>字段将以前编写的东西BUG填充在<form>中

0 个答案: