| Summary: | [GTK] input type=search doesn't get styled properly. | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Pedro Paulo <pedropaulosuzuki1> | ||||
| Component: | WebKitGTK | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | bugs-noreply | ||||
| Priority: | P2 | ||||||
| Version: | Other | ||||||
| Hardware: | PC | ||||||
| OS: | Linux | ||||||
| Attachments: |
|
||||||
Created attachment 448058 [details] 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.