Phone number fields are over-styled and do not blend well with other fields

Created on 28 March 2025, 2 months ago

Problem/Motivation

On a fresh installation this phone number field stands out with its own, somewhat opinionated styling rules that seem to go beyond the functional basics. I imagine most sites that choose to use this field either deal with that non-standard look or add custom styling rules to address it.

Steps to reproduce

1. Install Drupal and this phone number module.
2. Add a phone number field to a form with other fields.
3. View the form and see that the phone number field does not look, stylistically, like the other fields in the form.

Example:

Proposed resolution

Allow the site's current theme to style phone number fields by removing any non-essential style rules from them.

Remaining tasks

MR + review.

User interface changes

Phone number fields look more like, and blend better with, other fields.

API changes

None.

Data model changes

None.

🐛 Bug report
Status

Active

Version

2.0

Component

User interface

Created by

🇺🇸United States chrisolof

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @chrisolof
  • 🇮🇳India harishpatel86

    The phone number text field was changed to tel, but the style was not changed, which resulted in alignment issues. There is a patch I have made for that, as well as a screenshot of the issue.

  • 🇮🇳India Tirupati_Singh

    I'll look into this.

  • Pipeline finished with Success
    12 days ago
    Total: 264s
    #507406
  • Pipeline finished with Success
    12 days ago
    Total: 425s
    #507414
  • 🇮🇳India Tirupati_Singh

    Hi @chrisolof, I followed the steps to reproduce the issue and confirm that it still persists. When using the phone_number field, its design stands out with its own instead of rendering as per the current admin theme set. I've redesigned the number field rendering and removed the unnecessary CSS codes from the file. After the fixes, now phone number field is now being rendered as per the current admin theme. Please review the MR changes and let me know if any additional changes are needed.

    I've attached the screenshots of before-and-after fixes for reference.

    Thanks!

  • Pipeline finished with Success
    12 days ago
    Total: 376s
    #507464
Production build 0.71.5 2024