列表子元素上的框阴影行为

$(".card").click(function() {
  if ($(this).val() == 0) {
    $(this).addClass("clicked");
    $(this).val(1);
  } else {
    $(this).removeClass("clicked");
    $(this).val(0);
  }
});

$(".action").click(function() {
  var thisCard = $(this).parent().parent();
  thisCard.addClass("edit");
  thisCard.find(".title").css({
    "display": "none"
  });
  thisCard.find(".action").css({
    "display": "none"
  });
  thisCard.find(".action-edit").css({
    "display": "table-cell"
  });
  thisCard.find(".input-group").css({
    "display": "table-cell"
  });
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".input-main").val(thisCard.find(".title").text());
  } else {
    thisCard.find(".input-main").val(thisCard.find(".title-main").text());
    thisCard.find(".input-sub").val(thisCard.find(".title-sub").text());
  }
  thisCard.find(".input-main").focus();
  thisCard.removeClass("clicked");
});

$(".check").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.find(".title").css({
    "display": "inline-block"
  });
  thisCard.find(".action").css({
    "display": "table-cell"
  });
  thisCard.find(".action-edit").css({
    "display": "none"
  });
  thisCard.find(".input-group").css({
    "display": "none"
  });
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".title").text(thisCard.find(".input-main").val());
  } else {
    thisCard.find(".title-main").text(thisCard.find(".input-main").val());
    thisCard.find(".title-sub").text(thisCard.find(".input-sub").val());
  }
  thisCard.removeClass("clicked");
});

$(".cancel").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.find(".title").css({
    "display": "inline-block"
  });
  thisCard.find(".action").css({
    "display": "table-cell"
  });
  thisCard.find(".action-edit").css({
    "display": "none"
  });
  thisCard.find(".input-group").css({
    "display": "none"
  });
  thisCard.removeClass("clicked");
});

.card-wrapper {
  width: calc(100% - 48px);
  height: 100%;
  border-left: dashed 1px #ccc;
  border-right: dashed 1px #ccc;
  padding: 48px 16px 0;
  background-color: #fff;
}

.card-row {
  width: 100%;
}

.card-cell {
  display: inline-block;
  width: calc(100% / 6 - 20px);
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 16px;
}

.card {
  width: 100%;
  height: 70px;
  border-radius: 3px;
  background-color: #F8f8f8;
  box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
  font-size: 16px;
  cursor: pointer;
  border: solid 1px transparent;
}

.card .content {
  display: block;
  width: 100%;
}

.card .content .title,
.card .content .input {
  padding: 24px 0 24px 24px;
  font-size: 16px;
  color: #333;
  display: inline-block;
  width: calc(100% - 80px);
}

.card .content .title {
  white-space: nowrap;
  overflow: hidden;
}

.card .content .input {
  display: none;
}

.input-main,
.input-sub {
  border: none;
  font-size: 13px;
  border-bottom: solid 1px #c4c4c4;
  width: 100%;
}

input:focus {
  outline-style: none;
  box-shadow: none;
  border-bottom: solid 1px #c4c4c4;
}

.card .content .action {
  width: 24px;
  padding: 24px 20px 24px 12px;
  text-align: right;
  display: inline-block;
  vertical-align: top;
  float: right;
}

.card .content .action-edit {
  display: none;
  width: 36px;
  padding: 0;
  border-left: solid 1px #c4c4c4;
  vertical-align: top;
}

.check,
.cancel {
  height: 34.5px;
  text-align: center;
}

.action-edit>.check i,
.action-edit>.cancel i {
  line-height: 35px;
  font-size: 13px;
}

.cancel i {
  color: #333;
}

.check i {
  color: #00c983;
}

.check-tall,
.cancel-tall {
  height: 45.5px;
}

.check-tall i,
.cancel-tall i {
  line-height: 46px !important;
}

.cancel {
  border-bottom: solid 1px #c4c4c4;
}

.card .content .action i {
  font-size: 14px;
  color: #333;
}

.card .content .action i:hover {
  color: #00c983;
}

.clicked {
  background-color: #CAF1FF;
  box-shadow: 0px 0px 32px 0 rgba(0, 153, 255, 0.3);
}

.edit {
  background-color: #fff;
  border: solid 1px #00c983;
  box-shadow: 0px 0px 32px 0 rgba(0, 153, 255, 0.3);
}

.subtitle {
  font-size: 12px;
}

.subtitle-label {
  color: #999;
}

.input-sub {
  font-size: 12px;
}

.input-sub-line {
  display: table-row;
  width: 100%;
}

.input-sub-label {
  display: table-cell;
  width: 25%;
  font-size: 12px;
  color: #999;
}

.input-sub {
  display: table-cell;
  width: 100%;
}

.input-group {
  display: none;
  padding: 22px 24px;
}

.populate-card {
  position: absolute;
  right: 16px;
  bottom: 16px;
}

@media (max-width: 1199px) and (min-width: 768px) {
  .card-cell {
    width: calc(100% / 4 - 20px);
  }
}

@media (max-width: 767px) and (min-width: 576px) {
  .card-cell {
    width: calc(100% / 3 - 20px);
  }
}

@media (max-width: 575px) {
  .card-cell {
    width: 100%;
    padding-left: 0;
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">

<div class="card-wrapper">
  <ul class="card-row">
    <li class="card-cell">
      <div class="card card-first" value=0>
        <div class="content">
          <div class="title">Administration</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Agriculture</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Architecture</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Arts and Design</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Civil</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card card-last" value=0>
        <div class="content">
          <div class="title">Computer</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <div class="caption">1-Attribute Card</div>

  <div class="card" value=0>
    <div class="content">
      <div class="title"><span class="title-main">Bank Central Asia</span><br><span class="subtitle"><span class="subtitle-label">Code </span><span class="title-sub">014</span></span>
      </div>
      <div class="input-group">
        <input type="text" class="input-main">
        <div class="input-sub-line">
          <div class="input-sub-label">Code</div>
          <input class="input-sub" type="text"></div>
      </div>
      <div class="action"><i class="fas fa-pencil-alt"></i></div>
      <div class="action-edit">
        <div class="cancel cancel-tall"><i class="fas fa-times"></i></div>
        <div class="check check-tall"><i class="fas fa-check"></i></div>
      </div>
    </div>
  </div>
  <div class="caption">2-Attributes Card</div>
  <a class="button white-btn footer-btn populate-card">Populate</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>