ASP.NET I can’t write into HTML Input

I have a simple login page, which I wanted to beautify with some snow in the background. However this makes it unable for me to input anything into the input box, even if z-index is set to 100:

/* CSS (Login) : */

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}

.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}

.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

.form button:hover,
.form button:active,
.form button:focus {
  background: #43A047;
}

.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}

.form .message a {
  color: #4CAF50;
  text-decoration: none;
}

.form .register-form {
  display: none;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}

.container:before,
.container:after {
  content: "";
  display: block;
  clear: both;
}

.container .info {
  margin: 50px auto;
  text-align: center;
}

.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}

.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}

.container .info span a {
  color: #000000;
  text-decoration: none;
}

.container .info span .fa {
  color: #EF3B3A;
}

body {
  background: #76b852;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(right, #76b852, /*#8DC26F*/
  #333);
  background: -moz-linear-gradient(right, #76b852, /*#8DC26F*/
  #333);
  background: -o-linear-gradient(right, #76b852, /*#8DC26F*/
  #333);
  background: linear-gradient(to left, #76b852, /*#8DC26F*/
  #333);
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* CSS (Snow) : */

.background {
  color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}

.winter-is-coming,
.snow {
  z-index: -1;
  pointer-events: none;
}

.winter-is-coming {
  overflow: hidden;
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  max-width: initial;
  background: #333;
}

.snow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation: falling linear infinite both;
  transform: translate3D(0, -100%, 0);
}

.snow--near {
  animation-duration: 10s;
  background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-    large-075d267ecbc42e3564c8ed43516dd557.png');
  background-size: contain;
}

.snow--near+.snow--alt {
  animation-delay: 5s;
}

.snow--mid {
  animation-duration: 20s;
  background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-    medium-0b8a5e0732315b68e1f54185be7a1ad9.png');
  background-size: contain;
}

.snow--mid+.snow--alt {
  animation-delay: 10s;
}

.snow--far {
  animation-duration: 30s;
  background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-    small-1ecd03b1fce08c24e064ff8c0a72c519.png');
  background-size: contain;
}

.snow--far+.snow--alt {
  animation-delay: 15s;
}

@keyframes falling {
  0% {
    transform: translate3D(-7.5%, -100%, 0);
  }
  100% {
    transform: translate3D(7.5%, 100%, 0);
  }
}
<div class="winter-is-coming login-page">
  <div class="snow snow--near"></div>
  <div class="snow snow--near snow--alt"></div>

  <div class="snow snow--mid"></div>
  <div class="snow snow--mid snow--alt"></div>

  <div class="snow snow--far"></div>
  <div class="snow snow--far snow--alt"></div>
  <div class="form" style="z-index:100;">
    <form class="login-form">
      <h1>Login</h1>
      <input type="text" placeholder="Username" id="usernameBox" />
      <input type="password" placeholder="Password" id="passwordBox" />
      <button runat="server" onclick="loginClicked">login</button>
    </form>
  </div>
</div>

I know that the error lays in Snow.css, because if I don’t use it, I can use my login normally, but I can’t find anything wrong within the file

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

pointer-events is to be set on .snow only 😉

/* CSS (Login) : */

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}

.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}

.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

.form button:hover,
.form button:active,
.form button:focus {
  background: #43A047;
}

.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}

.form .message a {
  color: #4CAF50;
  text-decoration: none;
}

.form .register-form {
  display: none;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}

.container:before,
.container:after {
  content: "";
  display: block;
  clear: both;
}

.container .info {
  margin: 50px auto;
  text-align: center;
}

.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}

.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}

.container .info span a {
  color: #000000;
  text-decoration: none;
}

.container .info span .fa {
  color: #EF3B3A;
}

body {
  background: #76b852;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(right, #76b852, /*#8DC26F*/
  #333);
  background: -moz-linear-gradient(right, #76b852, /*#8DC26F*/
  #333);
  background: -o-linear-gradient(right, #76b852, /*#8DC26F*/
  #333);
  background: linear-gradient(to left, #76b852, /*#8DC26F*/
  #333);
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* CSS (Snow) : */

.background {
  color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}

.winter-is-coming,
.snow {
  z-index: -1;
}

.winter-is-coming {
  overflow: hidden;
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  max-width: initial;
  background: #333;
}

.snow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation: falling linear infinite both;
  transform: translate3D(0, -100%, 0);
  pointer-events: none;
}

.snow--near {
  animation-duration: 10s;
  background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-    large-075d267ecbc42e3564c8ed43516dd557.png');
  background-size: contain;
}

.snow--near+.snow--alt {
  animation-delay: 5s;
}

.snow--mid {
  animation-duration: 20s;
  background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-    medium-0b8a5e0732315b68e1f54185be7a1ad9.png');
  background-size: contain;
}

.snow--mid+.snow--alt {
  animation-delay: 10s;
}

.snow--far {
  animation-duration: 30s;
  background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-    small-1ecd03b1fce08c24e064ff8c0a72c519.png');
  background-size: contain;
}

.snow--far+.snow--alt {
  animation-delay: 15s;
}

@keyframes falling {
  0% {
    transform: translate3D(-7.5%, -100%, 0);
  }
  100% {
    transform: translate3D(7.5%, 100%, 0);
  }
}
<div class="winter-is-coming login-page">
  <div class="snow snow--near"></div>
  <div class="snow snow--near snow--alt"></div>

  <div class="snow snow--mid"></div>
  <div class="snow snow--mid snow--alt"></div>

  <div class="snow snow--far"></div>
  <div class="snow snow--far snow--alt"></div>
  <div class="form" style="z-index:100;">
    <form class="login-form">
      <h1>Login</h1>
      <input type="text" placeholder="Username" id="usernameBox" />
      <input type="password" placeholder="Password" id="passwordBox" />
      <button runat="server" onclick="loginClicked">login</button>
    </form>
  </div>
</div>

or reset on the form.

/* CSS (Login) : */

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}

.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  pointer-events:auto
}

.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}

.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

.form button:hover,
.form button:active,
.form button:focus {
  background: #43A047;
}

.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}

.form .message a {
  color: #4CAF50;
  text-decoration: none;
}

.form .register-form {
  display: none;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}

.container:before,
.container:after {
  content: "";
  display: block;
  clear: both;
}

.container .info {
  margin: 50px auto;
  text-align: center;
}

.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}

.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}

.container .info span a {
  color: #000000;
  text-decoration: none;
}

.container .info span .fa {
  color: #EF3B3A;
}

body {
  background: #76b852;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(right, #76b852, /*#8DC26F*/
  #333);
  background: -moz-linear-gradient(right, #76b852, /*#8DC26F*/
  #333);
  background: -o-linear-gradient(right, #76b852, /*#8DC26F*/
  #333);
  background: linear-gradient(to left, #76b852, /*#8DC26F*/
  #333);
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* CSS (Snow) : */

.background {
  color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}

.winter-is-coming,
.snow {
  z-index: -1;
  pointer-events: none;
}

.winter-is-coming {
  overflow: hidden;
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  max-width: initial;
  background: #333;
}

.snow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation: falling linear infinite both;
  transform: translate3D(0, -100%, 0);
}

.snow--near {
  animation-duration: 10s;
  background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-    large-075d267ecbc42e3564c8ed43516dd557.png');
  background-size: contain;
}

.snow--near+.snow--alt {
  animation-delay: 5s;
}

.snow--mid {
  animation-duration: 20s;
  background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-    medium-0b8a5e0732315b68e1f54185be7a1ad9.png');
  background-size: contain;
}

.snow--mid+.snow--alt {
  animation-delay: 10s;
}

.snow--far {
  animation-duration: 30s;
  background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-    small-1ecd03b1fce08c24e064ff8c0a72c519.png');
  background-size: contain;
}

.snow--far+.snow--alt {
  animation-delay: 15s;
}

@keyframes falling {
  0% {
    transform: translate3D(-7.5%, -100%, 0);
  }
  100% {
    transform: translate3D(7.5%, 100%, 0);
  }
}
<div class="winter-is-coming login-page">
  <div class="snow snow--near"></div>
  <div class="snow snow--near snow--alt"></div>

  <div class="snow snow--mid"></div>
  <div class="snow snow--mid snow--alt"></div>

  <div class="snow snow--far"></div>
  <div class="snow snow--far snow--alt"></div>
  <div class="form" style="z-index:100;">
    <form class="login-form">
      <h1>Login</h1>
      <input type="text" placeholder="Username" id="usernameBox" />
      <input type="password" placeholder="Password" id="passwordBox" />
      <button runat="server" onclick="loginClicked">login</button>
    </form>
  </div>
</div>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x