Override twitter bootstrap TextBox Glow and Shadows
Prevent the Bootstrap glow effect on textboxes with this simple box-shadow override:
This magic trick instantly removes the glow/shadow from all text inputs and textareas on focus.
For a total-free-zones from default styles, just implement the following:
Here, the !important flag is asserting its dominance, ensuring our styles prevail.
CSS Revealed: Shadows and Outlines
Not just a flag: The power of !important
The !important flag is often treated as the troublemaker of CSS. However, here it's the rebellion we need against Bootstrap's more specific selectors.
Compatibility & Plugin Aesthetics
Changing the default look of inputs might ruffle some feathers with plugins using Bootstrap's style. Also, while compatibility is generally maintained across modern browsers, it's good to be vigilant and perform the necessary checks with older versions.
Accessible design considerations
Don't forget about our friends using no-sight navigation. Removing focus indicators without providing alternatives might paint a Picasso for their user-experience.
Class and ID specificity: Your secret weapon
Applying changes to specific classes or IDs, like .form-control and .form-control:focus, can save you from a world of style conflicts in your application.
Sharpen your styles
Glow or no-glow
Removing the glow sometimes might feel like removing the 'soul' of your design. No worries! Using rgba values for borders and shadows, you can create your own painting.
Transitions: Not just for PowerPoint
Use CSS transitions to make changes feel smooth and weaved into your UI, maintaining a seamless flow.
New tricks: Shadows come in 'inset' variant too
Inset box-shadows can add a hint of sophistication to your textboxes, while avoiding the default glow.
Cross-compatibility is the key
Don't forget about the not-so-popular -webkit-box-shadow and -moz-box-shadow. They may sound like villains, but they're your partners in crime for achieving cross-browser compatibility.
The CSS Customisation Cookbook
Targeting with CSS classes
In a large codebase, try implementing separate CSS classes for the changes. This encourages better specificity and helps rid those anxiety-inducing inline styles.
Plugin Communities: Your CSS Guidance Counselors
Stuck with plugin-related issues? A little community outreach never hurt anybody. Tap into the developer's knowledge for the best way forward.
Iteration: There's no such thing as 'done'
Once your changes take effect, get ready for a round of testing. Not just to achieve the desired look, but also to make sure everything works flawlessly.
Was this article helpful?