2016-12-24 2 views
0

ich den folgenden Code verwenden Checkbox Tasten zu machen: JSBin:entfernen 3D-Effekt des Hintergrunds eines Knopfes

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <div class="btn-group" data-toggle="buttons-checkbox"> 
    <button type="button" class="btn btn-default active">INPUT</button> 
    </div> 
</body> 
</html> 

Ich mag nicht den 3D-Effekt des Hintergrunds die Schaltfläche:

enter image description here

Ich würde die gleiche graue Farbe als Hintergrund bevorzugen. Weiß jemand, wie man das realisiert?

PS: Ich würde gerne mit <button> statt <input> und bleiben.

Antwort

0

Das Problem, das ich mit Bootstrap habe, ist, dass Sie ständig ihren Standardstyling überschreiben müssen und Sie müssen sehr spezifisch sein, wie Sie das Element anvisieren, andernfalls wird Bootstrap Ihre CSS überschreiben. (Oder Sie können! Wichtig neben allem -> nicht empfohlen)

Wie auch immer, rüber, der 3D-Effekt, den Sie sehen, ist eine Box Schatten. Setzen Sie den Feldschatten einfach auf keinen.

button.btn.btn-default { 
 
    background: #e0e0e0; 
 
    box-shadow: none; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="btn-group" data-toggle="buttons-checkbox"> 
 
    <button type="button" class="btn btn-default active">INPUT</button> 
 
    </div> 
 
</body> 
 
</html>

Verwandte Themen