Homec4science

Styling up Jump Nav text box

Authored by Anh Nhan Nguyen <anhnhan@outlook.com> on Apr 1 2013, 15:24.

Description

Styling up Jump Nav text box

Summary:
This actually gives it a smooth look across all OS and browsers. Copy-paste from form inputs.

Motivation (aka Disclaimer)

I felt kind of... disturbed that it looked different in every browser / OS combination I have at my disposal. The range is from ugly (Chrome on Ubuntu) to pretty (IE9 on Win7 ¬.¬). I give a few examples

  • Ubuntu
    • Firefox
      • Actually looking very nice. Rounded borders and orange border on focus are default from UA style sheet?
    • Chrome
      • Looks ugly. 2px inset mid-grey border. What you would expect from Win '95
      • 1px inset mid-grey border (Win '98 style) + orange webkit outline.
  • Windows
    • IE9
      • Nice blocky text input with black border. Blue border upon hover. Really black border on focus?
    • IE10
      • Kind of same as IE9, though I had the feeling that it had a deeper black border
    • Firefox
      • Looks so normal that it is actually boring
    • Chrome
      • Looks pretty much normal, until focus where you get the webkit outlines. Ugly

No Mac, since I have no Mac. Also no iPhone/iPad. Have Android 4.1/WP8, though I never visited Phabricator with them

Test Plan:
Looked at it in

  • Ubuntu
    • Mozilla Firefox
    • Google Chrome
  • Windows 7/8
    • IE 9/10
    • Opera (Opera?)
    • Mozilla Firefox
    • Google Chrome

Everything smooth (exceptions in case of no border-radius/box-shadow)

Reviewers: epriestley, btrahan, chad

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5515

Details

Committed
epriestley <git@epriestley.com>Apr 1 2013, 15:27
Pushed
aubortJan 31 2017, 17:16
Parents
rPH48f1a578f880: Adding some type names to object handles
Branches
Unknown
Tags
Unknown

Event Timeline

epriestley <git@epriestley.com> committed rPH6e197fe91c3e: Styling up Jump Nav text box (authored by Anh Nhan Nguyen <anhnhan@outlook.com>).Apr 1 2013, 15:27