Fix CSP violations by replacing inline styles with CSS classes

[ahpang]

Problem

The renderInput() and renderToggleAll() methods in Select2.php were adding inline styles using Html::addCssStyle() and direct style attributes, which violates Content Security Policy (CSP) directives that restrict 'unsafe-inline' styles.

This prevents applications from implementing strict CSP policies for security hardening.

Solution

• Replaced all inline style usage with corresponding CSS classes
• Added new CSP-compliant CSS classes to select2-addl.css and minified version
• Maintained full backward compatibility and existing functionality

Changes Made

• src/Select2.php:

  • Replaced Html::addCssStyle($this->options, $opts) with Html::addCssClass() calls
  • Replaced 'style' => '...' attributes with 'class' => '...'

• src/assets/css/select2-addl.css & select2-addl.min.css:

  • Added .s2-plugin-loading - for hidden plugin loading state
  • Added .s2-plugin-loading-bs3 - Bootstrap 3 specific width override
  • Added .s2-accesskey-btn - for invisible accesskey button styling
  • Added .s2-togall-hidden - for hidden toggle-all parent element

Benefits

✅ CSP Compliance: Eliminates need for 'unsafe-inline' in style-src directive
✅ Security: Enables stricter Content Security Policies
✅ Maintainability: Styling centralized in CSS files vs scattered inline
✅ Performance: CSS classes are more efficient than inline styles
✅ Consistency: Follows existing s2- prefix naming convention
✅ Compatibility: Zero breaking changes, fully backward compatible

Testing

• Verified widget renders correctly across Bootstrap 3/4/5
• Tested plugin loading states with pluginLoading enabled
• Verified accesskey functionality works as expected
• Checked toggle-all button behavior in multiple select mode
• Confirmed CSP compliance with strict style-src 'self' policy

Browser Support

No impact on browser support - uses standard CSS classes that work in all supported browsers.