diff --git a/app/assets/javascripts/discourse/components/user-field.js.es6 b/app/assets/javascripts/discourse/components/user-field.js.es6
index 1585e9a3a5a..9851b457628 100644
--- a/app/assets/javascripts/discourse/components/user-field.js.es6
+++ b/app/assets/javascripts/discourse/components/user-field.js.es6
@@ -2,11 +2,22 @@ import { fmt } from "discourse/lib/computed";
 import computed from "ember-addons/ember-computed-decorators";
 
 export default Ember.Component.extend({
-  classNameBindings: [":user-field", "field.field_type"],
+  classNameBindings: [":user-field", "field.field_type", "customFieldClass"],
   layoutName: fmt("field.field_type", "components/user-fields/%@"),
 
   @computed
   noneLabel() {
     return "user_fields.none";
+  },
+
+  @computed("field.name")
+  customFieldClass(fieldName) {
+    if (fieldName) {
+      fieldName = fieldName
+        .replace(/\s+/g, "-")
+        .replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, "")
+        .toLowerCase();
+      return fieldName && `user-field-${fieldName}`;
+    }
   }
 });