我有這個
<input type="button">
我想讓按鈕看起來像你從中得到的代碼：
div {
position: relative;
background: #3F3C53;
width: 50px;
height: 50px;
color: white;
border-radius: 50%;
box-shadow: 0px 0px 15px 1px #4185BC;
margin: 50px;
}
div:after {
content: '???';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
font-size: 15px;
letter-spacing: 4px;
margin-top: 2px;
}
如何洗掉框的默認外觀并將其更改為三個垂直點？
uj5u.com熱心網友回復：
給定的代碼通過添加一個偽元素來設定 div 的樣式，該元素將三個點作為內容，并且可以在不旋轉實際 div 的情況下設定它們的樣式（旋轉）。
在輸入元素上使用偽元素不是“合法的”CSS（盡管某些瀏覽器可能允許），因此此代碼段將輸入包裝在具有樣式的 div 中，并使實際輸入元素的不透明度為 0，因此它仍然是可點擊但看不到。
請注意 after 偽元素已更改為 before 偽元素，以便它不會覆寫輸入元素。
div {
position: absolute;
width: 50px;
height: 50px;
background: #3F3C53;
color: white;
border-radius: 50%;
box-shadow: 0px 0px 15px 1px #4185BC;
margin: 50px;
}
div::before {
content: '???';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
font-size: 15px;
letter-spacing: 4px;
margin-top: 2px;
background: #3F3C53;
}
input {
width: 50px;
height: 50px;
border-radius: 50%;
opacity: 0;
}<div><input type="button" onclick="alert('I have been clicked');"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/334587.html
下一篇：如何在java中初始化幾個按鈕