You may have a form field that auto populates information via JavaScript, and you want the value to be shown on the page, but you want to disable the input so that the user cannot change the value.

<form id="my_form">
    <label for="my_input">Number: </label>
    <input type="number" value="6" />
</form>

Normally, the form field can be clicked in, and in this case some increment/decrement arrows will show for the user to change the value.

First, if we place the following CSS, we can stop the increment/decrement arrows from showing on mouse hover.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    display: none;
}

Next, we can stop the user from manually changing the value by clicking in the field. The following is jQuery and will apply the readonly attribute to the form field on page load.

$('#my_form input').attr('readonly', 'readonly');

And by adding the following CSS, we can make the input field not look like a typical editable field so as not to confuse the user.

#my_form input {
    border: none;
    background: white;
}

<input type="hidden" value="6" />

#my_form input,
#my_form label {
    display: none;
}

---