删除特定屏幕尺寸的底部边框

Question

As you can see outer border are lighter than inner border in this form i tried to remove the bottom border for specific screen size but its not working I want when screen size matches then bottom border will remove

 var x = window.matchMedia("(max-width: 992px)"); myFunction(x); x.addListener(myFunction); function myFunction(x) { if (x.matches) { document.getElementById("b-brdr").style.borderBottom = "none"; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="container-lg py-3" id="ofc_use"> <div class="row mx-auto"> <div class="border border-dark col-lg-3 bg-warning d-flex flex-column justify-content-center" id="b-brdr"> <h5>FOR OFFICE USE ONLY</h5> <p>(to be filled by financial institution)</p> </div> <div class="col-lg-9"> <div class="row"> <div class="border border-dark col-lg-3 d-flex align-items-center" id="b-brdr"> <h4>Application Type*</h4> </div> <div class="border border-dark col-lg-1" id="b-brdr"><input type="checkbox" name="application" class="check form-check-input" required> New</div> <div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" id="update" name="application" class="check form-check-input" required> Update</div> <div class="border border-dark col-lg-4" id="b-brdr"> <h5 class="d-inline">KYC Number</h5> <p class="d-inline"> (Mandotary for KYC Update Request)</p> </div> <div class="border border-dark col-lg-2" id="b-brdr"><input type="text" id="kyc" class="form-control border-0 h-100"></div> </div> <div class="row"> <div class="border border-dark col-lg-3 d-flex align-items-center" id="b-brdr"> <h4>Account Type*</h4> </div> <div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Normal</div> <div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Minor</div> <div class="border border-dark col-lg-5" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Aadhaar OTP-based e-KYC(in non face to face mode)</div> </div> </div> </div> </div>

Answer 1

@Md Mohtesham Azam add this to your css below:

@media only screen and (max-width: 992px){
    #b-brdr { border-bottom:0 !important;}
}

Answer 2

Does this work?

 var x = window.matchMedia("(max-width: 992px)"); myFunction(x); x.addListener(myFunction); function myFunction(x) { if (x.matches) { var div_list = document.querySelectorAll('#b-brdr'); var div_array = [...div_list] div_array.forEach(div => { div.style.cssText = "border-bottom:none !important;"; }); } else{ var div_list = document.querySelectorAll('#b-brdr'); var div_array = [...div_list] div_array.forEach(div => { div.style.cssText = ""; }); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="container-lg py-3" id="ofc_use"> <div class="row mx-auto"> <div class="border border-dark col-lg-3 bg-warning d-flex flex-column justify-content-center" id="b-brdr"> <h5>FOR OFFICE USE ONLY</h5> <p>(to be filled by financial institution)</p> </div> <div class="col-lg-9"> <div class="row"> <div class="border border-dark col-lg-3 d-flex align-items-center" id="b-brdr"> <h4>Application Type*</h4> </div> <div class="border border-dark col-lg-1" id="b-brdr"><input type="checkbox" name="application" class="check form-check-input" required> New</div> <div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" id="update" name="application" class="check form-check-input" required> Update</div> <div class="border border-dark col-lg-4" id="b-brdr"> <h5 class="d-inline">KYC Number</h5> <p class="d-inline"> (Mandotary for KYC Update Request)</p> </div> <div class="border border-dark col-lg-2" id="b-brdr"><input type="text" id="kyc" class="form-control border-0 h-100"></div> </div> <div class="row"> <div class="border border-dark col-lg-3 d-flex align-items-center" id="b-brdr"> <h4>Account Type*</h4> </div> <div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Normal</div> <div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Minor</div> <div class="border border-dark col-lg-5" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Aadhaar OTP-based e-KYC(in non face to face mode)</div> </div> </div> </div> </div>

Changes made:myFunction changed to document.getElementById("b-brdr").style.cssText = "border-bottom:none !important;";

Demo

Reference