Enlarge a Choice column's "specify your own value" text area?

Question

Can anyone suggest a way to make the "specify your own value" text box larger in the Edit Form of a list item's Choice column? I would like to make it look more like a multi-line text field type, since some of these fill-in entries can be quite long and the end-user wants to see the entirety of the text they type in. Specifically, I am referring to a Choice field that has "allow fill in choices" enabled:

The first thing I can think of is to maybe use a CEWP with javascript to accomplish this, but not quite sure how to expand the box yet.

Answer 1

Avoid manipulating a page via scripts loaded with CEWPs. It's messy and insecure and can be broken easily by any user with edit access to the page. Load those scripts in the master page or the page layout, if you need them. And yes, you can make the text box wider with CSS, but you won't be able to convert it to a multi-line text field. That's another data type and beyond the means of CSS. Use the developer tools of your browser to identify the CSS applied to the text box and override it with custom CSS.

Answer 2

Yeah, you're on the right path. Use a CEWP, and if you can grab the control, you should be all set to apply css to resize it as needed. Here's a little cheat I use. These functions return the TD cells from the table. Using getFieldCcontrolCell("Field Name"), you can then search it for the textbox and work it from there.

function getFieldControlCell(fieldDisplayName){
        return getFieldLabelCell(fieldDisplayName).next();
}

function getFieldLabelCell(fieldDisplayName){
        return $(".ms-formlabel").filter(function(index){
                return $(this).find("nobr").text() == fieldDisplayName || $(this).find("nobr").text() == fieldDisplayName + " *";
        })
}