<form data-attr="enabled">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
<form data-attr="disabled">
  <div class="form-group">
    <label for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" aria-describedby="emailHelp2" placeholder="Enter email" disabled>
    <small id="emailHelp2" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" disabled >
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck2" disabled>
    <label class="form-check-label" for="exampleCheck2">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary" disabled >Submit</button>
</form>

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2vw;
  background: #eaeaea;
}

form {
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  border: 1px solid #aeaeae;
  margin: 10px;
  position: relative;
  
  &::before {
    content: "All input are " attr(data-attr);
    position: absolute;
    padding: 10px;
    background: linear-gradient(to right, #f36, #f63);
    color: #fff;
    border-radius: 5px;
    top: -25px;
  }
}

input:not([type="checkbox"]):enabled {
  border: 2px solid green;
}

input:not([type="checkbox"]):disabled {
  border: 2px solid red;
}