Skip to content

DateRangeInput3 has different appearance on different browsers #7032

Open
@jandrew44

Description

Environment

  • Package version(s):
    @blueprintjs/core: 5.13.0
    @blueprintjs/datetime2: 2.3.10
    @blueprintjs/select: 5.2.4
  • Operating System:
    Windows 10 Home Edition
  • Browser name and version:
    Google Chrome 130.0.6723.70
    Firefox 131.0.3
    Microsoft Edge 130.0.2849.56

Code Sandbox

Reproducible on the Blueprint sample page:
https://blueprintjs.com/docs/#datetime2/date-range-input3

Steps to reproduce

  1. Open the link
  2. Switch to dark theme
  3. Open month selector

Actual behavior

Note different styles applied in different browsers.

Chrome:
Screenshot_12

Firefox:
Screenshot_13

Edge:
Screenshot_14

Expected behavior

Same component appearance in all browsers.

Possible solution

Can be improved a bit by overriding styles manually.
But could not get the same appearance because native structures are being used by DateRangeInput3.

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions