Cascading Style Sheets/Clipping

Clip Property Top/Left Coordinates

The top and left parameters of the clip property remove any pixels with coordinates above or before the specified values, based on the top and left edges of the element.

Clip Property Bottom/Right Coordinates

• The bottom and right parameters remove any pixels located below or after the specified values, based on the top and left edges of the element.
• The values for bottom and right must be higher than the values of top and left in order to see any of the layer.

Clip Property Limitations

• The clipped element must be absolutely positioned for the clip property to work, so use a relatively positioned container around it.
• Specifying the height of the container keeps the next line from overlapping with the clipped areas.

Clip Property Usage

Use clip: rect(0, auto, auto, 0); as the default clip values to do proper trial and error

Use clip: rect(0, ###, auto, 0); to clip from left-to-right

Use clip: rect(0, auto, ###, 0); to clip from top-to-bottom

Using the Clip Property to create a File Upload Button Replacement Solution

Use clipping, opacity and z-index to style file inputs by transparently positioning the field over an image:

 input[type="file"] { outline: none; cursor: pointer; position: absolute; left: 0; clip: rect(0px 215px 22px 145px); z-index: 2; opacity: 0; }

Use separate styles for Webkit browsers since the file input is rendered differently:

* > /**/ input[type="file"], x:-webkit-any-link { outline: none; cursor: pointer; position: absolute; left: 0; clip: rect(0px 86px 22px 0px); z-index: 2; opacity: 0; }