CODEWITHSUNDEEP
javascripthtmlcss
user4995138
user4995138

Reputation:

How to highlight checkbox pseudo element which substitutes hidden checkbox input, when it required

I have a checkbox pseudo element which substitutes hidden checkbox input, and I want to highlight it when hidden checkbox is required. Is there any css solution? What is the right way to solve problem? https://jsfiddle.net/ht2c9sbd/3/

<form>
  <div class="group-input">
    <input type="checkbox" id="c_1" required hidden="">
    <label for="c_1">I agree with everything.</label>
  </div>
  <input type="submit" value="submit" id="submit">
</form>

css:

input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    margin: 0 14px 0 0;
    cursor: pointer;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: calc(50% - 15px);
    -webkit-transition: background-color 0.25s ease, border-color 0.25s ease;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    border: 1px solid rgba(20, 61, 139, 0.2);
    margin: 0 14px 0 0;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

input[type="checkbox"]:checked + label::before {
    background-image: url(https://image.flaticon.com/icons/png/512/447/447147.png);
    background-size: 15px;
    border: 1px solid rgba(20, 61, 139, 0);
    background-color: rgba(20, 61, 139, 0.2);
    background-position: center;
    background-repeat: no-repeat;
}

here is my horrible js solution:

function checkCheckbox(e) {
    if (!e.checked) {
        $('head').append('<style id="invalidCheckbox">input[type="checkbox"] + label::before {border: 1px solid #ff3535; box-shadow: 0 0 2px #ff3535;}</style>');
        return false;
    } else {
        let temp = $('head style:last');
        while(temp && temp[0].id === "invalidCheckbox"){
            temp.remove();
            temp = $('head style:last');
        }
        return true;
    }
}

const mycheckbox = document.getElementById('c_1');
document.getElementById("submit").addEventListener('click', function(e){
  e.preventDefault();
  checkCheckbox(mycheckbox); 
});

Upvotes: 0

Views: 168

Answers (2)

Vinesh Goyal
Vinesh Goyal

Reputation: 637

Script:

const mycheckbox = document.getElementById('c_1');
document.getElementById("submit").addEventListener('click', function(e){
    e.preventDefault();
    if ( mycheckbox.hasAttribute('required') && !mycheckbox.checked ){
    mycheckbox.className = "invalid-input"; // <-- add new class
  } else {
    mycheckbox.className = "";
  }
});

Style (you can change style as you want) : 

input[type="checkbox"].invalid-input + label::before{
  background-color: red;
}

Try to update the existing DOM element instead of creating a new element in DOM because DOM manipulation is slow.

A repaint occurs when changes are made to an elements skin that changes visibly but does not affect its layout.

Create new DOM element is even more critical to performance because it involves changes that affect the layout of a portion of the page

Upvotes: 1

Kalnode
Kalnode

Reputation: 11366

To highlight a required checkbox:

In CSS:

/* Style (any) element with the required attribute: */
:required {
  background: red;
}

/* Style input elements with the required attribute: */
input:required {
  box-shadow: 1px 1px 10px rgba(200, 0, 0, 0.5);
}

/* Style focused and required element: */
input:required:focus {
  border: 2px solid red;
  outline: none;
}

/* Style hover and required element: */
input:required:hover {
  opacity: 1;
}

In JS:

// Get the element
var req = document.getElementById("my_checkbox").required;

// Check if required
if(req.hasAttribute('required')) {

    // Style it
    req.style.background = "red";
}

Upvotes: 0

Related Questions