时间戳

首页 > 解决方案 > 使用有效/无效伪类的问题

html - 使用有效/无效伪类的问题

问题描述

我正在尝试仅使用 HTML 和 CSS 制作表单。问题是我使用有效的伪类来提供动画，但是当它无效时，它会与标签混淆。代码将在https://codepen.io/hardik-g1/pen/mdVzMyL上，如果您没有得到，请在名称字段中尝试此类型编号，您将看到问题。代码：

<div id="fle">
<div class="container">
  <h2 id="aa">HACKATHON REGISTRATION</h2>
 <form action="">
   <div class="group">      
      <input type="text" value="" pattern="[a-zA-z]+" required title="No numbers or special characters allowed">
      <label class="set">First Name</label>
     
    </div>
   <div class="group">      
      <input type="text" value="" pattern="[a-zA-z]+" required title="No numbers or special characters allowed">
     <label class="set">Last Name</label></p>
    </div>
   <div class="group">      
      <input type="email" value="" required>
      <label class="set">Email</label>
    </div> 
   <div class="group">      
      <input type="number" value="" required pattern="[0-9].{10}" title="Enter correct mobile number">
      <label class="set">Mobile number</label>
    </div>
   <div class="group">
     <p>Branch</p>
      <select name="branch" id="" required><option value=" ">Please select your branch</option><option value="cs">Computer Science</option>
        <option value="it">Information Technology</option>
      </select>
      
    </div>
  <div class="group"><p>Do you have participated before?</p>
  Yes<input id="a" type="radio" name="hosting" value="yes">
   No<input type="radio" id="a" name="hosting" value="no">
  </div>
  
<div class="group" id="c">
  <p>Project Description</p>
  <textarea name="comment" placeholder="Write Here" rows="4" cols="40" required></textarea>
  </div>
  <input id="b" type="checkbox" id="Agree" name="agree" value="yes" required> Click here to agree to all the information above is true.
  <p><button class="button" type="submit"><span>Register</span></button></p>
  
  </form>
 </div>
     <div>
    <video id="video" width="860" onclick="play();">
        <source type="video/webm" src="https://res.cloudinary.com/iatneh/video/upload/v1594920650/Virtual_Hackathon_copy_-_Biteable_kmyhcp.mp4"/>
    </video>
       <h1>Click on it to play</h1>
       <p>All validations show when submitted</p>
</div>
</div>

CSS

#fle{
  display:flex;
}
body{
  color:#999; 
}
#aa{
  color:black;
}
#b{
  width: 12.5px;
  margin:0; 
}
#c{
  margin:10px 0;
}
#a{
  width:30px;
  color:#999; 
}
select{
  width: 300px;
  height: 30px;
}

.container { 
  font-family:'Roboto';
  width:600px;  
  background:#FFF;
  padding:10px 50px 50px;
}
.group { 
  position:relative; 
  margin-bottom:30px; 
}
input {
  font-size:18px;
  padding:10px 10px 10px 5px;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus{ outline:none; }

label   {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all;
}

input:focus ~ label, input:valid ~ label {
   top:-20px;
  font-size:14px;
  color:#5264AE;
}
input:invalid ~ label{
  opacity:0.4;
}
.button {
  border-radius: 4px;
  background-color: #f4511e;
  border:None;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

标签： htmlcss

解决方案

您可以收听输入更改，如果它在内部有值，请添加一个类以保持标签浮动。

这是一个示例，您可以在代码中修改和使用它（只要输入中有内容，它就会将 .floating 类保留在标签上）：

function checkForInput(element) {
  const $label = $(element).siblings('label');

  if ($(element).val().length > 0) {
    $label.addClass('floating');
  } else {
    $label.removeClass('floating');
  }
}


$('input.input').on('change keyup', function() {
  checkForInput(this);  
});
label.floating {
  color:#5264AE;
  /* use styles for floating your labels here */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <input type="text" name="some-name" class="input" />
  <label class="input-label" for="textdemo">label</label>
</div>

推荐阅读