How can I restrict the number of characters entered into an HTML Input with CSS (or jQuery, if necessary)?

Question

I can manipulate a control based on the state of another control, as shown in this jsfiddle, where the state of a Checkbox alters the width and background color of a Textbox

Answer 1

I don't think it's possible to do with CSS.

The jquery/javascript approach would be set a default maxlength in the input field and then change it's attribute in the checkbox event. The numeric value can then be tied to a CSS property.

$('[id$=txtbxSSNOrITIN]').attr("maxlength", adjustedInputLengthVal );

you also have to crop the text if you're downsizing to a shorter length.

reference: Can I specify maxlength in css?