SharePoint Online: Resize Column Width in List Forms using CSS

Requirement: Change the width of all columns in the list edit form!

How to modify column width in SharePoint Online?

If you want to set the width of a specific field in classic list forms, find its title or ID using Developer tools and use this script in Script editor:

<script>
  $(document).ready(function(){
    $('input[title="IC Number"]').css('width','350px');
  });
</script>

Here is the CSS to set the width of all columns:

<style type="text/css">
.ms-formtable .ms-input, .ms-formtable Input
{
 width: 250px !important;
}
.ms-formtable Select
{
 width: 262px !important;
}
</style>

Similarly, to wrap field labels, use:

<style type="text/css">
.ms-formlabel {
    width: 800px;
}
.ms-formlabel nobr {
    white-space: normal;
}

Copy-paste this CSS into either the Script editor or content editor web parts.

Before

After:

If you want to modify column width in SharePoint Online list views, use: SharePoint Online: Set Column Width in List View