how to make box shadow to be visible through input

user_19561773 0
Viewed 39

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

css html
2 Answers

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" class="logo center block">
  <div>
    <p class="p1 center">Welcome! In order to continue your visit on Vienna distribution, you must be of legal drinking age.</p>
  </div>
  <table class="center">
    <tr>
      <th colspan="3" class="th1">WHEN WER<span class="under">E Y</span>OU BORN</th>
    </tr>
    <tr>
      <td><label class="age" for="day">DAY (DD)</label></td>
      <td><label class="age" for="month">MONTH (MM)</label></td>
      <td><label class="age" for="year">YEAR (YYYY)</label></td>
    </tr>
    <tr>
      <td><input type="text" class="input1" name="day" required></td>
      <td><input type="text" class="input2" name="month" required></td>
      <td><input type="text" class="input3" name="year" required></td>
    </tr>
    <tr>
      <td colspan="3"><button class="btn center block">I AM OF LEGAL DRINKING AGE</button></td>
    </tr>
  </table>
  <footer class="ftr">
    <a href="#" class="logo"><img src="images/facebooklogo.png"></a>
    <a href="#" class="logo"><img src="images/instalogo.png"></a>
    <a href="#" class="logo"><img src="images/twitterlogo.png"></a>
  </footer>
  <div class="cookiesdiv center">
    <table>
      <tr>
        <td>
          <p class="pcook">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 class="ckbtn1">ACCEPT</button>
        </td>
        <td>
          <button class="ckbtn2">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.

user_108674540

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" class="input1" 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/

user_88939470
Related