I try to remove the blue box that appears on click in front of buttons as you can see below:
在提问之前，我做了很多研究，我try 了以下主题给出的解决方案:
- How to remove focus border (outline) around text/input boxes? (Chrome)个
- Remove blue box around buttons. HTML
- How to remove the blue box shadow border in button if clicked
- How do I remove blue "selected" outline on buttons?
- How do I remove blue "selected" outline on buttons?
- Remove blue border from css custom-styled button in Chrome个
- How to remove focus around buttons on click
我已经试过所有的答案了！它可以在电脑上使用，但不能在移动设备上使用.
如果您使用的是计算机，可以try 使用判断器模拟移动设备.这是按钮:https://jsfiddle.net/t4ykshst/
#add {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
outline: none;
cursor: pointer;
padding: 10px;
overflow: hidden;
border: none;
-webkit-border-radius: 50%;
border-radius: 50%;
color: rgba(255, 255, 255, 0.9);
text-align: center;
background: #1abc9c;
-webkit-box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);
}
#add:active {
opacity: 0.85;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
}<input type="button" id="add" value="+" title="" style="position: absolute; left: 0px; top: 0px; width: 52px; height: 52px;" />