锁定在HTML CSS中的表单后，更改边框

Question

我正在html，css和jquery中创建一个表单。在这里，当我单击锁定按钮时，我可以禁用所有字段行为，但是不幸的是，我无法隐藏边框。意味着，如果有一个值，则不应显示边界，而应在悬停时显示悬停行为。如果该领域没有价值，则应仅显示边界底，并像往常一样悬停行为。您能检查我的小提琴，这将有助于更好地理解。

$("button").click(function() {
  alert("The Button was clicked.");
  $('#selectBox').css('pointer-events', 'none');
  $(".userInput").prop("disabled", true);
});

p {
  color: #505050 !important;
  margin-top: 7px;
  font-size: 15px !important;
  font-family: Segoe00020UI, Tahoma, Arial;
  font-weight: 600 !important;
}
.heading {
  background-color: #F3F3F3;
  margin-top: 0px;
  width: auto;
  padding-left: 15px;
  font-weight: 600 !important;
  border-top: 1px solid #d6d6d6;
  border-left: 1px solid #d6d6d6;
  border-right: 1px solid #d6d6d6;
  height: 40px;
}
.contentBody {
  font-family: Segoe00020UI, Tahoma, Arial;
  width: 100%;
}
.tab-container {
  border: 1px solid #d6d6d6;
  margin-left: 0px;
  margin-top: 0px;
  width: auto;
  height: auto;
  padding: 1px;
  background-color: #FFFFFF;
}
.tab-navigation {
  margin-bottom: 15px;
  margin-left: 15px;
  margin-top: 10px;
}
.tab-content {
  font-family: Segoe00020UI, Tahoma, Arial;
  margin-left: 10px;
  margin-bottom: 15px;
  width: 96.5%;
  height: auto;
  color: black;
  font-size: 14px;
  text-align: left;
  line-height: 30px;
  padding: 20px;
}
.contentLabel {
  color: #505050 !important;
  font-family: Segoe00020UI, Tahoma, Arial;
  font-size: 14px;
  font-style: normal;
  text-shadow: 1px 1px 0px #fff;
  margin-left: 1%;
}
#selectBox {
  width: 300px;
  color: #505050 !important;
  font-family: Segoe00020UI, Tahoma, Arial;
  font-size: 15px;
  margin-left: 7.4%;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
}
.label {
  color: #505050 !important;
  display: inline-block;
  width: 280px;
  text-align: left;
  font-family: Segoe00020UI, Tahoma, Arial;
  font-size: 14px;
}
.userInput {
  color: #505050 !important;
  background-color: rgb(255, 255, 255) !important;
  border: 0px;
  border-bottom: 0.7px dashed #505050;
  font-family: Segoe UI, Tahoma, Arial;
  font-size: 14px;
  display: inline-block;
  width: 300px;
  text-align: left;
  border-radius: 1px;
  outline: 0;
  text-indent: 2px;
}
.userInput:hover,
.userInput:focus {
  background-color: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 0);
  font-family: Segoe UI, Tahoma, Arial;
  margin-top: 3px;
  margin-left: 0px;
  border: 1px solid rgb(204, 204, 204);
  font-size: 14px;
  cursor: text;
  width: 300px;
  height: 20px !important;
  padding-left: 3px;
  -moz-box-shadow: 2px 2px 3px #666;
  -webkit-box-shadow: 2px 2px 3px #666;
  box-shadow: 2px 2px 3px #666;
  text-align: left;
}
.userInput:focus:valid {
  border: 1px solid rgb(204, 204, 204);
}
.userInput:valid {
  border: 0px solid rgb(204, 204, 204);
}
.spaning {
  margin-left: -317px;
}
.spaning:before {
  content: '$';
  color: red;
  -webkit-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -o-transition: color 0.5s;
  transition: color 0.5s;
}
.dollarReq {
  border-bottom: 0.7px dashed #505050;
  /*looks before entering anything in field*/
}
.dollarReq:focus {
  border: 1px solid rgb(204, 204, 204);
}
.dollarReq:focus+.spaning:before {
  content: '$';
  color: orange;
}
.dollarReq:focus:valid {
  border: 1px solid rgb(204, 204, 204);
}
.dollarReq:focus:valid+.spaning:before {
  content: '$';
  color: yellow;
}
.dollarReq:valid {
  border: 0px solid rgb(204, 204, 204);
}
.dollarReq:valid+.spaning:before {
  content: '$';
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contentBody" id="content_wrapper">
  <div class="heading">
    <p>Heading</p>
  </div>
  <div class="tab-container">
    <div class="tab-navigation">
      <span class="contentLabel" id="contentType">Property Finance type : </span>
      <select id="selectBox">
        <option value="10">Value1</option>
      </select>
    </div>
    <div id="tab-10" class="tab tab-content">
      <div>
        <label class="label">Value2</label>
        <input class="userInput dollarReq" type="text" autocomplete="off" required />
        <span class="spaning" for="input"></span>
      </div>
      <div>
        <label class="label">Value3</label>
        <input class="userInput dollarReq" type="text" autocomplete="off" required />
        <span class="spaning" for="input"></span>
      </div>
      <div>
        <label class="label">Value4</label>
        <input class="userInput" type="text" autocomplete="off" required />
      </div>
      <div>
        <label class="label">Value5</label>
        <input class="userInput" type="text" autocomplete="off" required />
      </div>
    </div>
    <button type="submit">
            Lock
            </button>
  </div>
</div>
<!--property finance Body-->

Answer 1

首先，您应该插入字段值后的类添加jquery。

jQuery代码将是这样的：

$("input").on('change', function() {
 if($(this).value) {
   $(this).addClass('userInput-valid');
 }
});

css这样：

.userInput-valid {
    border: 0px solid rgb(204, 204, 204);
}

尝试使用一些jQuery解决此问题。CSS，并非每次都会帮助您;）

Answer 2

AddClass"锁定在您的表格上"（如果已锁定）。您需要使用js在输入字段上收听键，然后addClass" notempty"，然后css .form-locked .dollarreq.notempty {border-bottom：0;}