how to make box shadow to be visible through input-CodePudding

Please help me, i am having a tough time with a box shadow, i've been looking for some time now and didn't find a solution

https://jsfiddle.net/4xqavefz/ .input1 / .input2 / .input3

Above is the whole code, in css you are looking for the .input1 ,.input2, and .input3

I am trying to make the box shadow to be seen through the input like below image

image

CodePudding user response：

You could keep the shadow as it is (it falls outside the element) and add in the rest of the coloring with a background-image which is a linear-gradient.

This snippet puts that background-image displaced by 12px (=14px minus a border width).

@font-face {
  font-family: futuraptbook;
  src: url(../fonts/futuraptbook.ttf);
}

@font-face {
  font-family: futuraptdemi;
  src: url(../fonts/futuraptbook.ttf);
}

body {
  background: black;
}

.block {
  display: block;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.logo {
  width: 185;
  height: 161;
}

.p1 {
  color: white;
  font-size: 24px;
  text-align: center;
  width: 620px;
  height: 63px;
  line-height: 32px;
  font-family: futuraptbook;
  margin-bottom: 100px;
}

.th1 {
  color: white;
  font-size: 32px;
  line-height: 43px;
  font-family: futuraptdemi;
  padding-bottom: 30px;
}

.age {
  font-size: 15px;
  text-align: left;
  line-height: 20px;
  font-family: futuraptdemi;
  color: white;
  letter-spacing: 1.5px;
}

td input[class^='input'],
td input[class^=" input"] {
  width: 176px;
  height: 60px;
  border: 2px solid #FFFFFF;
  background: rgba(0, 0, 0, 0);
  background-image: linear-gradient(#54B3A1, #54B3A1);
  background-position: 12px 12px;
  background-repeat: no-repeat;
  box-shadow: 14px 14px 0px 0px #54B3A1;
  margin-right: 40px;
  color: white;
  font-size: 18px;
  font-family: futuraptbook;
  text-align: center;
}

td input[class^='input']:focus,
td input[class^=" input"] {
  box-shadow: 0px 0px 0px 0px black;
  width: 218px;
  margin-right: -1px;
  margin-left: -1px;
  border-radius: 0px;
  background-image: linear-gradient(transparent, transparent);
}

td input[class^='input']:valid,
td input[class^=" input"] {
  box-shadow: 14px 14px 0px 0px #54B3A1;
  background-image: linear-gradient(#54B3A1, #54B3A1);
  background-position: 12px 12px;
  background-repeat: no-repeat;
  width: 218px;
  margin-right: -1px;
  margin-left: -1px;
  border-radius: 0px;
}

.btn {
  border-radius: 27px;
  background: #D94016;
  width: 300px;
  height: 50px;
  margin-top: 50px;
}

.ftr {
  position: relative;
  text-align: center;
  width: 100%;
  margin-top: 100px;
  margin-bottom: 40px;
}

.under {
  text-decoration: none;
  position: relative;
}

.under:after {
  position: absolute;
  content: '';
  height: 1px;
  bottom: -4px;
  width: 75%;
  background: #54B3A1;
  left: 0px;
}

.logo:hover {
  cursor: pointer;
}

.cookiesdiv {
  border: 1px solid white;
  padding: 10px;
  bottom: 0px;
  width: 942px;
}

.pcook {
  width: 95%;
  font-size: 15px;
  text-align: left;
  color: white;
  font-family: futuraptbook;
}

.ckbtn1 {
  border-radius: 27px;
  background: #54B3A1;
  width: 72px;
  height: 27px;
  color: white;
  font-family: futuraptdemi;
  font-size: 13px;
}

.ckbtn2 {
  border: 1px solid white;
  border-radius: 27px;
  background: black;
  width: 134px;
  height: 27px;
  color: white;
  font-family: futuraptdemi;
  font-size: 13px;
}

<html>

<head>
  <link rel="stylesheet" href="css/agev.css">
</head>

<body>
  <img src="images/viennalogo.png" >
  <div>
    <p >Welcome! In order to continue your visit on Vienna distribution, you must be of legal drinking age.</p>
  </div>
  <table >
    <tr>
      <th colspan="3" >WHEN WER<span >E Y</span>OU BORN</th>
    </tr>
    <tr>
      <td><label  for="day">DAY (DD)</label></td>
      <td><label  for="month">MONTH (MM)</label></td>
      <td><label  for="year">YEAR (YYYY)</label></td>
    </tr>
    <tr>
      <td><input type="text"  name="day" required></td>
      <td><input type="text"  name="month" required></td>
      <td><input type="text"  name="year" required></td>
    </tr>
    <tr>
      <td colspan="3"><button >I AM OF LEGAL DRINKING AGE</button></td>
    </tr>
  </table>
  <footer >
    <a href="#" ><img src="images/facebooklogo.png"></a>
    <a href="#" ><img src="images/instalogo.png"></a>
    <a href="#" ><img src="images/twitterlogo.png"></a>
  </footer>
  <div >
    <table>
      <tr>
        <td>
          <p >We use cookies on our website to give you the most relevant experience. By clicking “Accept”, you consent to the use of ALL cookies. Alternatively, you may click “Cookie Settings” to provide a controlled consent.</p>
        </td>
        <td>
          <button >ACCEPT</button>
        </td>
        <td>
          <button >COOKIE SETTINGS</button>
        </td>
      </tr>
    </table>
  </div>
</body>

</html>

Note - to prevent having to repeat the settings for each of the 3 inputs the snippet instead selects by the class beginning with 'input'. You will want to refine that if there is more structure added later to be sure of getting the right elements.

I noted that there was no validation in the sense of making sure that the numbers typed were both numbers and of the right length, but appreciate this is a different question.

CodePudding user response：

The issue is that box-shadow wraps around an element, so you cant use box-shadow here instead you should use an absolute div like in the below example

<td>
   <input type="text"  name="day" required>
   <div style="
      position: absolute;
      width: 80%;
      height: 100%;
      background: #54b3a1;
      top: 16px;
      left: 16px;
      z-index: 22;
      ">
   </div>
</td>

working example https://jsfiddle.net/ahforcuw/1/