Select Boxes in SharePoint EditForm sometimes looks squashed, how can it be made wider

I think a lot of us had had this problem where in SharePoint the select boxes in its NewForm.aspx and EditForm.aspx looks too small.

There is a lot of workarounds suggested in these posts, all very useful.

http://social.msdn.microsoft.com/Forums/sharepoint/en-US/751b4339-f971-4a9c-afdb-f471ebb2c864/change-the-width-of-the-field-in-sharepoint-display-form-and-edit-form?forum=sharepointcustomizationlegacy

However, here is what I found works but the problem is you must add it in every newform or edit form where you need it.

You could include it in the site's css if you wush to apply throughout.  But in my case, I only needed it in one list's location.  So in the Newform.aspx and EditForm.aspx.

Add

<style type="text/css">
.ms-long 
{
width:900px !important;
}

td.ms-input div
{
width:400px!important;
height:180px!important;
overflow:auto;
}
</style>

This causes the form's fields to generally get wider.  The td.ms-input div width value causes the select's container wrapper to get bigger, which was probably the root cause of it looking squashed.

On IE browser, there was also a need to initialise the target and probably source select box to a certain width if it has nothing in it.

For some reason the select box's background looks a different shade if it's width is not initialised

Simply add a line of code in the page.  Set the width to the same as td.ms-input div.  In this case was 400px.

<script type="text/javascript"> 

document.forms['aspnetForm'].IDOFSHAREPOINTGENERATEDCONTROL.style.width = "400px";

</script>