Question

我创建了登录和注册。在第一个中，使用css实现外观变化没有问题。在第二种情况下，当我使用django表单时，html编辑出现问题。我无法像第一种情况那样获得焦点效果并改变铭文的位置。这是两种情况的样本。

登录视图：

A）的HTML

{% extends 'computer_science_in_medicine/main.html' %}
{% load staticfiles %}
{% block body_block %}
<link rel="stylesheet" type="text/css" href="{% static 'css/login_user.css' %} "/>
<div class="jumbotron">
    <div class="container">
        <h1>PLEASE LOGIN</h1>
        <form action="{% url 'accounts:user_login' %}" method="POST">
            {% csrf_token %}
            <div class="inputBox">
                <input type="text" name="username" placeholder="" required="">
                <label for="username">Username</label>
            </div>
            <div class="inputBox">
                <input type="password" name="password" required="">
                <label for="password">Password:</label>
            </div>

            <input class="btn btn-primary btn-lg" type="submit" name="" value="Login">

        </form>
    </div>
</div>
{% endblock %}

b）css

.jumbotron {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 70px;
background: rgba(0, 0, 0, .8);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
border-radius: 30px;
}

.jumbotron h1 {
 margin: 0 0 30px;
    padding: 0;
    color: #fbfbfb;
    text-align: center;
    font-weight: bold;
 }

  .jumbotron .inputBox {
   position: relative;
}

  .jumbotron .inputBox input {
   width: 100%;
   padding: 10px 0;
    font-size: 22px;
   color: #fbfbfb;
  margin-bottom: 30px;
letter-spacing: 2px;
border: none;
border-bottom: 1px solid #fbfbfb;
outline: none;
background: transparent;
}

  .jumbotron .inputBox label {
    position: absolute;
   top: 0;
   left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fbfbfb;
  pointer-events: none;
  transition: .5s;
}

 .jumbotron .inputBox input:focus ~ label,
 .jumbotron .inputBox input:valid ~ label {
  top: -18px;
  left: 0;
   color: #d4939f;
  font-size: 14px;
}

以下是有问题的代码：

a）HTML

<!DOCTYPE html>
{% extends 'computer_science_in_medicine/main.html' %}
{% load staticfiles %}
{% block body_block %}
<link rel="stylesheet" type="text/css" href="{% static 
'css/register_user.css' %} "/>
<div class="jumbotron">
    {% if registered %}
        <h1>Thank you for registering!</h1>
    {% else %}
        <div class="container">
            <h1>Register Here!</h1>
            <h3> Fill out the form:</h3>
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="inputBox">
                        {{ user_form.as_p }}
                </div>
                <div class="inputBoxFile">
                        {{ profile_form.as_p }}
                </div>
                <input class="btn btn-primary btn-lg" type="submit" 
      name="" value="Register">
            </form>
        </div>
    {% endif %}
</div>

   {% endblock %}

b）css：

.jumbotron {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 70px;
background: rgba(0, 0, 0, .8);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
border-radius: 30px;
 }

      .jumbotron h1, h3, span {
   margin: 0 0 10px;
   padding: 0;
  color: #fbfbfb;
  text-align: center;
  font-weight: bold;
  }

 .jumbotron .inputBox > p {
  position: relative;
   }

 .jumbotron .inputBoxFile > p {
   position: relative;
   }

 .jumbotron .inputBox > p > input {
   width: 100%;
   padding: 10px 0;
   font-size: 22px;
   color: #fbfbfb;
   margin-bottom: 5px;
   letter-spacing: 2px;
   border: none;
   border-bottom: 1px solid #fbfbfb;
   outline: none;
   background: transparent;
  }

.jumbotron .inputBoxFile > p > input {
  width: 100%;
  padding: 25px 0;
  font-size: 22px;
   color: #fbfbfb;
  margin-bottom: 5px;
  letter-spacing: 2px;
  border: none;
  border-bottom: 1px solid #fbfbfb;
  outline: none;
  background: transparent;
   }

.jumbotron .inputBox > p > label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px 0;
  font-size: 16px;
  color: #fbfbfb;
  pointer-events: none;
  transition: .5s;
  }

.jumbotron .inputBoxFile > p > label {
   position: absolute;
   top: 0;
  left: 0;
   padding: 0px 0;
  font-size: 16px;
  color: #fbfbfb;
  pointer-events: none;
   transition: .5s;
  }

.jumbotron .inputBox > p > input:focus ~ label,
.jumbotron .inputBox > p > input:valid ~ p {
   top: -18px;
   left: 0;
    color: #d4939f;
   font-size: 14px;
 }

使用css的Django表单样式

0 个答案: