Question

在HTML5和CSS中，我想拥有带浮动标签的表单。

我的意思是如果输入是有效且有效的，则标签最高可达20px，但在空状态下，标签位于顶部：0px位置。问题是当值无效时，它会降到正常位置。我怎样才能得到这个，而当输入为空时，顶部为0，当输入内容（有效或无效）时，它会上升。

＆＃13;

.group label {
  color: #7B53C1;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  right: 25px;
  top: 0;
  pointer-events: none;
  transition: .2s ease all;
  -moz-transition: .2s ease all;
  -webkit-transition: .2s ease all;
}

.group input:focus ~ label,
.group input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #7B53C1;
}

＆＃13;

<div class="group col-md-12 no-padder form-group require-field">
  <input pattern="[0-9]+" class="form-control" [(ngModel)]="price" name="price" type="text" required>
  <span class="highlight"></span>
  <span class="bar"></span>
  <label class="price">rial</label>
</div>

＆＃13;

Answer 1

这是你想要的吗？问题有点令人困惑

     .group label {
     color: #7B53C1;
     font-size: 14px;
     font-weight: normal;

     float:right
     pointer-events: none;
     right: 25px;
     top: 0px;
     transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    }
    .group input:focus ~ label, .group input:valid ~ label {
    top: -20px;
    font-size: 14px;
    color: #7B53C1;
    float: left;
    width: auto;

    }
    
    
    
    
.group{
       width: auto;
      position: absolute;
   
   }

<div class="group col-md-12 no-padder form-group require-field">
                <input pattern="[0-9]+" class="form-control" [(ngModel)]="price" name="price" type="text" required>
                <span class="highlight"></span>
                <span class="bar"></span>
                <label class="price">rial</label>
              </div>

Answer 2

您可以使用input:valid + label

没有价值

label { color: #333;}

如果您在输入中添加值：悬停或焦点添加您想要的内容

input:focus + label, input:valid + label {
   color:red;
}

DEMO https://jsfiddle.net/8fhn6ux9/

Answer 3

我已提及this site来创建浮动输入

使用keyup，focusout和focusout，您需要在浮动标签上设置和删除empty类。

empty类有一些浮动动画样式。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
label {
  position: relative;
  display: inline-block;
}
label span {
  position: absolute;
  left: 20px;
  top: -2em;
  font-size: .75em;
  cursor: text;
  color: dodgerblue;
  transition: all 150ms ease;
}

label.empty input {
  border-color: #d9d9d9;
}
label.empty span {
  top: 50%;
  transform: translateY(-50%);
  font-size: 1em;
  background: none;
  color: #cccccc;
}

input {
  border: 2px solid #f2f2f2;
  outline: none;
}
input:focus {
  border-color: #d9d9d9;
}
input:valid {
  border-color: #42d142;
}
input:invalid {
  border-color: #ff8e7a;
}

body {
  display: flex;
  min-height: 100vh;
  background: #f1f1f1;
  font-family: 'Lato', sans-serif;
  font-size: 150%;
}

form {
  margin: auto;
}

input, button {
  padding: 15px 20px;
  border-radius: 1px;
  border: 2px solid #bdbdbd;
}

button {
  border-color: #616161;
  background: #616161;
  color: #f6f7f8;
  text-transform: uppercase;
  letter-spacing: 2px;
}
</style>
</head>
<body>
<form>
  <label>
    <span>First Name</span>
    <input type="text" pattern=".{3,}" required title="Enter at least 3 characters.">
  </label>
  <button>Submit</button>
</form>
<script>
$('input:empty, textarea:empty').closest('label').addClass('empty');

$('input').keyup(function () {
  if ($(this).val().trim() !== '') {
    $(this).closest('label').removeClass('empty');
  } else {
    $(this).closest('label').addClass('empty');
  }
});

    $("input").focusin(function(){
        $(this).closest('label').removeClass('empty');
		console.log('focusin');
    });
    $("input").focusout(function(){
	  if ($(this).val().trim() !== '') {
		$(this).closest('label').removeClass('empty');
	  } else {
		$(this).closest('label').addClass('empty');
	  }
      console.log('focusout');
    });
</script>
</body>
</html>

Answer 4

你看起来像这样：

* {
  box-sizing: border-box;
  font-family: 'Titillium Web', sans-serif;
}
.wrapper {
  width: 90%;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 3px 20px 2px #E1BEE7;
}
.wrapper h2 {
  padding: 15px;
  box-shadow: 0 0px 20px 0px #E1BEE7;
  color: #AA00FF;
  text-align: center;
}
.frm-wrap ul {
  list-style: none;
  padding: 10px 20px;
  margin: 0;
}
.frm-wrap ul li {
  display: block;
  position: relative;
}
.frm-wrap ul li + li {
  margin-top: 25px;
}
.frm-wrap ul li input {
  width: 100%;
  font-size: 16px;
  border: 1px solid #E1BEE7;
  color: #748590;
  padding: 18px 12px;
  background: none;
  border-radius: 2px;
  box-shadow: none;
  outline: none;
}
.frm-wrap ul li input:focus + label,
.frm-wrap ul li input:valid + label {
  top: 2px;
  font-size: 13px;
}
.frm-wrap ul li label {
  color: #AA00FF;
  font-size: 18px;
  position: absolute;
  left: 12px;
  top: 17px;
  z-index: -1;
  transition: 0.2s;
}
.frm-wrap ul li button {
  width: 100%;
  padding: 12px 20px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  box-shadow: none;
  outline: none;
  background-color: #7B1FA2;
  color: #fff;
  display: block;
  margin: 20px 0;
}

<div class="wrapper">
  <h2>Login</h2>
  <div class="frm-wrap">
    <ul>
      <li>
        <input type="text" required>
        <label>Username</label>
      </li>
      <li>
        <input type="password" required>
        <label>Password</label>
      </li>
      <li>
        <button type="submit">Login</button>
      </li>
    </ul>
  </div>
</div>

您还可以查看此Codepen https://codepen.io/kravisingh/pen/jYGeyY

如何设置浮动标签输入？

4 个答案: