javascript - 在 html css 中锁定表单后更改边框

Question

我正在用 Html、CSS 和 jQuery 创建一个表单。这里当我点击锁定按钮时，我可以禁用所有字段行为，但不幸的是，我无法隐藏边框。意思是，如果有一个值，它不应该显示边框，但在悬停时，它应该显示悬停行为。如果字段中没有值，它应该仅显示边框底部和像往常一样悬停行为。你能检查一下我的 fiddle 吗，这将有助于更好地理解。

$("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: Segoe\000020UI, 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: Segoe\000020UI, 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: Segoe\000020UI, 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: Segoe\000020UI, 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: Segoe\000020UI, 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: Segoe\000020UI, 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，不是每次都能帮到你 ;)