How to hide my label after input selection?

Asked

Viewed 141 times

-1

Hello, I created a text input, and would like to hide it after the user selects it for the fill. I lined up a label inside the input simulating a placeholder.(I chose this option to make it easier to style) but when I put the display:none; after Focus nothing happens, which is the most efficient way to hide my label ?

#config {
  font-family: 'Poetsen One', sans-serif;
  font-size: 12px;
  color:#646464;
  text-align: center;

}

input {
  border: 2px solid #646464;
  border-radius: 30px;
  background-color: transparent;
  padding: 6px;
  margin: 0 6px;
  font-family: 'Poetsen One', sans-serif;
  font-size: 15px;
  color: #919191;
  border-radius: 30px;
  outline: none;

}

input:focus {
  box-shadow: 0px -1px 10px rgba(57, 182, 78, 0.5),
              0px 0px 15px rgba(57, 182, 78, 0.5);
}
input:focus > label {
  display: none;
}

label {
  position: absolute;
  margin: 5px 32px;
  font-size: 16px;
  cursor: text;
  z-index: -1;
}


label::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f4ff";
}

#lbl-score::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f091";
}
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <link rel='stylesheet' type="text/css" href='CSS/teste.css' >
        <link rel="icon" href="CSS/img/favicon.ico" type="image/x-icon">
        <link rel='stylesheet' type="text/css" href='CSS/fontawesome-free-5.11.2-web/css/all.css'>
        <title>Dice - The Game</title>
    </head>
    <body>  
        <section id='config'>
            <h1 id='text'><i class="fa fa-exclamation-circle"></i>Change or modify the name of the players</h1>
            <label id='lbl-player-0'> Name Player 1</label><input id='ipt-player-0' class="ipt-name-change"></input>
            <label id='lbl-player-1'> Name Player 2</label><input id='ipt-player-1' class="ipt-name-change"></input>
            <h1 id='text'><i class="fa fa-exclamation-circle"></i> Reset the Winner conditions</h1>
            <label id="lbl-score"> Score for Winner</label><input id='ipt-score' type='number'class="ipt-name-change"></input>
          
    </body>
</html>

html css

1 answer

1


The way you want to do it doesn’t seem feasible because when the input loses the focus, to label will again appear on top of what was typed in the input. You would have to do an additional control via Javascript to make it work.

If you want to do only with CSS, use the attribute placeholder and put each input into your label and add one <span></span> which will receive the icon. The span will be fixed in and to the left of the input and the remaining space will be for typing.

I used text-indent to give internal spacing in the elements. I believe this makes it easier and, in my opinion, more friendly:

#config {
  font-family: 'Poetsen One', sans-serif;
  font-size: 12px;
  color:#646464;
  text-align: center;
}

#config input {
  border: 2px solid #646464;
  border-radius: 30px;
  background-color: transparent;
  padding: 6px;
  margin: 0 6px;
  font-family: 'Poetsen One', sans-serif;
  font-size: 15px;
  color: #919191;
  border-radius: 30px;
  outline: none;
  text-indent: 40px;
}

#config input:focus {
  box-shadow: 0px -1px 10px rgba(57, 182, 78, 0.5),
              0px 0px 15px rgba(57, 182, 78, 0.5);
}

#config label {
  position: relative;
  font-size: 16px;
}

#lbl-player-0 span::before,
#lbl-player-1 span::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f4ff";
  margin-right: 10px;
}

#lbl-score span::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f091";
  margin-right: 10px;
}

#config label span{
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   text-indent: 25px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<section id='config'>
   <h1 id='text'>
      <i class="fa fa-exclamation-circle"></i> Change or modify the name of the players
   </h1>
   <label id='lbl-player-0'>
      <input placeholder="Name Player 1" id='ipt-player-0' class="ipt-name-change"></input>
      <span></span>
   </label>

   <label id='lbl-player-1'>
      <input placeholder="Name Player 2" id='ipt-player-1' class="ipt-name-change" required></input>
      <span></span>
   </label>
   <h1 id='text'>
      <i class="fa fa-exclamation-circle"></i> Reset the Winner conditions
   </h1>
   <label id="lbl-score">
      <input placeholder="Score for Winner" id='ipt-score' type='number'class="ipt-name-change" required></input>
      <span></span>
   </label>
</section>

  • Muiito Well, I thought I would really have to appeal to the js,

Browser other questions tagged html css

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