Across the land, we've used subclassing RenderObject (most of the time RenderBlock) to customize appearance of form controls and other elements. It's a convenient hack, but longer term, it's pain. The hand-built classes often break layout assumptions (RenderFileUploadControl lays out while it paints) or don't follow CSS layout at all (RenderSlider layout is completely custom, so you can't animate its properties), and otherwise introduce a maintenance burden on the render tree code. We should work to reduce the number of these custom render objects and replace their layout with standard CSS idioms, if possible. In cases where this is not possible, we should consider adding CSS features to provide missing layout capabilities.
I made some changes of RenderSlider and RenderTextControlSingleLine to reduce the amount of custom layout code. However, they still have a lot of custom code. I had no good idea to realize the followings with CSS. In RenderTextControlSingleLine, we have two nodes in the simplest case; <input> and the inner editable text <div>. - If the <input> height is auto, it is calculated from the height of the inner <div>. This has no problem. - If the <input> content height is taller than the height of the inner <div>, center the inner <div> in the <input> content vertically. Is this realized with CSS? - If the <input> content height is smaller than the height of the inner <div>, the inner <div> height should be shrunk, or the inner <div> should be clipped by the <input>. If a text field has some decoration elements such as a search cancel button or a spin button, we wrap the inner <div> and the decoration elements with a flexible box container. The flexible box container resolved the issue of vertical centering, but I had no good idea to make the flexible box container height same as the <input> content height. As for RenderSlider, it has problems similar to RenderTextControlSingleLine.
Tab, is there any pending CSS spec/proposal that would give us this type of capability?