[Webkit-unassigned] [Bug 234734] New: [GTK] input type=search doesn't get styled properly.

Tue Dec 28 14:46:22 PST 2021

https://bugs.webkit.org/show_bug.cgi?id=234734

            Bug ID: 234734
           Summary: [GTK] input type=search doesn't get styled properly.
           Product: WebKit
           Version: Other
          Hardware: PC
                OS: Linux
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: WebKitGTK
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: pedropaulosuzuki1 at gmail.com
                CC: bugs-noreply at webkitgtk.org

Created attachment 448058

  --> https://bugs.webkit.org/attachment.cgi?id=448058&action=review

Test example on input type=search custom styling not working properly on WebkitGTK

Hello everyone! Hope y'all doing fine this tuesday!

I was bugtracking my website on GNOME Web and found out that WebkitGTK seems to have some issues to style <input type="search"> elements. If the input is type="text", everything works fine. You're able to change the border-radius, remove the border, change the background color and all of that. But on type="search", you're not able to do any of that. Of course you can change the font-color, set the width and height you want, add padding, but some of the settings just fail to work when the input is set to type="search" for some reason. It doesn't seem to be an issue on Safari, so I guess it probably is an WebkitGTK specific issue.

## Working example
```html
<!DOCTYPE html>
<html>
        <head>
            <title>[GTK] input type=search doesn't get styled properly.</title>
                <style>
                        body {
                                width: 100vw;
                                height: 100vh;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                gap: 20px;
                        }

                        input {
                                width: 350px;
                                height: 30px;
                                border: 0;
                                outline: 0;
                                border-radius: 20px;

                                text-align: center;
                                background-color: #eee;
                        }
                </style>
        </head>
        <body>
                <input type="text" placeholder="Type=text gets styled properly in WebkitGTK">
                <input type="search" placeholder="Search doesn't get styled properly in WebkitGTK">
        </body>
</html>
```html

Issue found on GNOME Web 41.3 Flatpak (WebKitGTK 2.34.2). On a friend's iPhone it worked without major problems regarding this specific issue.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20211228/73700ea3/attachment.htm>