This is a test page. Anyone is free to use the code or examples on this page if they're at all helpful.
For a full list of test pages on the Mathmagician Wiki, see Category:Test pages.

Screenshot of what this textfield looks like when it's in-focus (click inside the textfield) in the Chrome browser if no other styling has been specified: Textfield 1

This styling is different for different browsers. It's not caused by a stylesheet I or Wikia have written, it seems built in to the browser.

How do I

  1. Find out what the styling even is? I've looked up and down in Developer Tools and I'm still not sure where exactly I should look, or what CSS selectors I should be looking for. Right-click and "inspect element" didn't seem to be helpful... I see "user agent stylesheet" next to a few of the styles, so I think that might be what I'm looking for, but I'm not exactly sure. Does "user agent" = a web browser?
  2. Is it possible to override the browser's default styling? If I can just figure out what styles are affecting this text field, I'd like to try overriding them with my own custom styles by using more specific / higher priority CSS selectors.


/* styling for Textfield page */
.page-Textfield #myTextField:focus {
    border:2px solid green;
.page-Textfield #myTextField {
    border:2px dashed gold;


How to find :focus styles in Chrome: Check focused styles chrome