Bug 234734

Summary: [GTK] input type=search doesn't get styled properly.
Product: WebKit Reporter: Pedro Paulo <pedropaulosuzuki1>
Component: WebKitGTKAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bugs-noreply
Priority: P2    
Version: Other   
Hardware: PC   
OS: Linux   
Attachments:
Description Flags
Test example on input type=search custom styling not working properly on WebkitGTK none

Pedro Paulo
Reported 2021-12-28 14:46:22 PST
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.
Attachments
Test example on input type=search custom styling not working properly on WebkitGTK (658 bytes, text/html)
2021-12-28 14:46 PST, Pedro Paulo 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Note You need to log in before you can comment on or make changes to this bug.