在CSS中,可以使用以下代碼來實現(xiàn)input后面有瀏覽的功能:
input[type="file"] { width: 100%; height: 30px; padding: 5px; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); background-color: #fff; color: #333; text-align: left; vertical-align: middle; position: relative; } input[type="file"]::after { content: "瀏覽"; position: absolute; right: 0; top: 0; padding: 5px; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); background-color: #fff; color: #333; }
上述代碼會將input文件上傳按鈕樣式化,并在按鈕后面添加“瀏覽”文字。input[type="file"]
選擇器用于選擇文件上傳按鈕,::after
偽元素用于在按鈕后面添加文字,通過調(diào)整position
屬性,可以將文字定位在按鈕的右側(cè),為了保持按鈕和文字的樣式一致,還設(shè)置了相同的邊框、圓角、陰影等樣式屬性。
版權(quán)聲明:除非特別標注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時請以鏈接形式注明文章出處。