234734 2021-12-28 14:46:22 -0800 [GTK] input type=search doesn't get styled properly. 2021-12-28 14:46:22 -0800 1 1 1 Unclassified WebKit WebKitGTK Other PC Linux NEW P2 Normal --- 1 pedropaulosuzuki1 webkit-unassigned bugs-noreply oldest_to_newest 1827130 0 448058 pedropaulosuzuki1 2021-12-28 14:46:22 -0800 Created attachment 448058 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. 448058 2021-12-28 14:46:22 -0800 2021-12-28 14:46:22 -0800 Test example on input type=search custom styling not working properly on WebkitGTK [GTK] input type search doesn't get styled properly.html text/html 658 pedropaulosuzuki1 PCFET0NUWVBFIGh0bWw+CjxodG1sPgoJPGhlYWQ+CgkgICAgPHRpdGxlPltHVEtdIGlucHV0IHR5 cGU9c2VhcmNoIGRvZXNuJ3QgZ2V0IHN0eWxlZCBwcm9wZXJseS48L3RpdGxlPgoJCTxzdHlsZT4K CQkJYm9keSB7CgkJCQl3aWR0aDogMTAwdnc7CgkJCQloZWlnaHQ6IDEwMHZoOwoJCQkJZGlzcGxh eTogZmxleDsKCQkJCWZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CgkJCQlhbGlnbi1pdGVtczogY2Vu dGVyOwoJCQkJanVzdGlmeS1jb250ZW50OiBjZW50ZXI7CgkJCQlnYXA6IDIwcHg7CgkJCX0KCQkJ CgkJCWlucHV0IHsKCQkJCXdpZHRoOiAzNTBweDsKCQkJCWhlaWdodDogMzBweDsKCQkJCWJvcmRl cjogMDsKCQkJCW91dGxpbmU6IDA7CgkJCQlib3JkZXItcmFkaXVzOiAyMHB4OwoKCQkJCXRleHQt YWxpZ246IGNlbnRlcjsKCQkJCWJhY2tncm91bmQtY29sb3I6ICNlZWU7CgkJCX0KCQk8L3N0eWxl PgoJPC9oZWFkPgoJPGJvZHk+CgkJPGlucHV0IHR5cGU9InRleHQiIHBsYWNlaG9sZGVyPSJUeXBl PXRleHQgZ2V0cyBzdHlsZWQgcHJvcGVybHkgaW4gV2Via2l0R1RLIj4KCQk8aW5wdXQgdHlwZT0i c2VhcmNoIiBwbGFjZWhvbGRlcj0iU2VhcmNoIGRvZXNuJ3QgZ2V0IHN0eWxlZCBwcm9wZXJseSBp biBXZWJraXRHVEsiPgoJPC9ib2R5Pgo8L2h0bWw+Cg==