如何从输入按钮隐藏边框，引导冲突

我试图使一个fab像材料设计 fab按钮。如何从输入按钮隐藏边框，引导冲突

我以前border-radius使其圆形，但在那之后，当我点击它选择为方形这样的：

.fab { 
 
    border-radius: 50%; 
 
    border: 0; 
 
    color: #000; 
 
    margin: auto; 
 
    padding: auto; 
 
    vertical-align: middle; 
 
    box-shadow: 0 2px 7px rgba(0, 0, 0, .5); 
 
    position: fixed !important; 
 
    right: 20px; 
 
    bottom: 20px; 
 
    z-index: 100; 
 
    -webkit-user-select: none; 
 
} 
 

 
.fab.big { 
 
    width: 50px; 
 
    height: 50px; 
 
}

<button class="fab big white ripple red-ripple"> 
 
    <i style="font-size:18px;" 
 
    class="material-icons"> 
 
    add 
 
    </i> 
 
</button>

我想要一个晶圆厂的按钮是这样的：Material Design Lite Buttons

我也试过-webkit-user-select: none但它没有奏效。

同样的事情也发生在正常的按钮，我该如何解决这个问题？

来源

2016-11-24 Rak_code

研究* CSS形状*。除此之外，HTML中的任何元素都将是一个矩形。 – connexo

是啊，我知道，但我想隐藏那个选定的边框那就是 –

'outline：none;' – connexo

正如评论中提到的outline: none;可用于防止点击时显示方形边框。

.fab{ 
 
border-radius:50%; 
 
border:0; 
 
color:#000; 
 
margin: auto; 
 
padding:auto; 
 
vertical-align: middle; 
 
box-shadow:0px 2px 7px rgba(0,0,0,0.5); 
 
position:fixed !important; 
 
right:20px; 
 
bottom:20px; 
 
z-index:100; 
 
-webkit-user-select:none; 
 
    outline: none; 
 
} 
 

 
.fab.big{ 
 
width:50px; 
 
height:50px; 
 
}

<button class="fab big white ripple red-ripple"><i style="font-size:18px;" class="material-icons">add</i></button>

来源

2016-11-24 19:09:28 JSouthward

如何从输入按钮隐藏边框，引导冲突

回答

相关问题