如何更改输入按钮（方形）的默认外观，使其看起来像三个垂直点？

Question

我有这个

<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;
}

如何删除框的默认外观并将其更改为三个垂直点？

Answer 1

给定的代码通过添加一个以三个点作为内容的伪元素来设置 div 的样式，并且能够在不旋转实际 div 的情况下设置它们的样式（旋转）。

在输入元素上使用伪元素不是 'legal' CSS（虽然有些浏览器可能允许）所以这个片段将输入包装在一个 div 中，它有样式并使实际输入元素的不透明度为 0，因此它仍然可以点击但看不到。

请注意，after 伪元素已更改为 before 伪元素，这样它就不会覆盖 input 元素。

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>

如何更改输入按钮（方形）的默认外观，使其看起来像三个垂直点？

How to change the default look of an input button (square) to make it look like three vertical dots?

html

css

input

button