Reapplying CSS on another page

Asked

Viewed 29 times

-2

I’m trying to reapply the same CSS from a login screen, in a registration that has 2 more inputs. However they don’t get the same configuration and I can’t find the error.

CSS is like this:

.input-field {
  position: relative;
}

form .input-field:first-child {
  margin-bottom: 1.5rem;
  margin-top: 15px;
}

.input-field .underline::before {
  content: " ";
  position: absolute;
  height: 1px;
  width: 100%;
  bottom: -5px;
  left: 0;
  background: rgb(0, 0, 0, 0.2);
}

.input-field .underline::after {
  content: " ";
  position: absolute;
  height: 1px;
  width: 100%;
  bottom: -5px;
  left: 0;
  background: linear-gradient(90deg, rgba(240, 191, 9, 1) 0%, rgba(255, 154, 38, 1) 50%, rgba(255, 106, 0, 1) 100%);
  transform: scaleX(0);
  transition: all .3s ease-in-out;
  transform-origin: left;
}

.input-field input:focus~.underline::after {
  transform: scaleX(1);
}

form {
  display: flex;
  flex-direction: column;
}

.input-field input {
  outline: none;
  font-size: 0.9rem;
  color: rgb(0, 0, 0, 0.7)
}
<form action="">
  <div class="input-field">
    <input type="text" name="nome" id="nome" placeholder="Digite seu nome">
    <div class="underline"></div>
  </div>

  <div class="input-field">
    <input type="text" name="username" id="username" placeholder="Digite seu usuário">
    <div class="underline"></div>
  </div>

  <div class="input-field">
    <input type="password" name="password" id="password" placeholder="Digite sua senha">
    <div class="underline"></div>
  </div>

  <div class="input-field">
    <input type="password" name="confirmpassword" id="confirmpassword" placeholder="Confirmar sua senha">
    <div class="underline"></div>
  </div>

tela

html5 css3

1 answer

0

You have to load your CSS into the other file. In HTML you should have something like <link rel="stylesheet" href="assets/css/main.css"> The way assets/css/main.css you have to trade for your way and put inside the tag <head>. For simple words you need to load the CSS into every page you want to share styles.

  • This was done, but continues as in the image.

  • open the browser console and see if there is a missing file error

  • I used the code you posted and created an example in your question, if you check will not have the styles applied, sure you did not make mistakes in the classes and id’s?

  • is that it was basically copy and glue, just added two more inputs with the same class’s. That’s what’s weird.

  • Then it is because it should not be loading the file, check the browser console and see if there is no missing file error. It may be that the file path is wrong

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.