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;
}
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.
Why 1SMARTchicken?
See More →
Thanks for your support!
CSS Books
All are affiliate links. Thank you for your support!
CSS NOTES:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
