码迷,mamicode.com
首页 > Web开发 > 详细

重写bootstrap组件CSS样式

时间:2019-11-10 17:39:22      阅读:301      评论:0      收藏:0      [点我收藏+]

标签:body   div   pdo   tst   重写   ado   select   表格   去除阴影   

一、去除button点击按压的蓝色边框

1 .btn:focus,
2 .btn:active:focus,
3 .btn.active:focus,
4 .btn.focus,
5 .btn:active.focus,
6 .btn.active.focus {
7     outline: none;
8     box-shadow: none; /*去除阴影*/
9 }

 

二、去除Select组件选中的蓝色边框

1 /*-----去除下拉选择框的outline-------*/
2 .bootstrap-select .dropdown-toggle:focus {
3     outline: none !important;
4 }
5 
6 /*-----下拉选择框去除选项的outline---*/
7 a:focus {
8     outline: none !important;
9 }

 

三、去除input输入框的蓝色边框

1 /*-----去除蓝色边框,重写样式---------*/
2 .form-control:focus {
3     outline: none;
4     border-color: #ccc;
5     -webkit-box-shadow: none;
6     box-shadow: none;
7 }

 

四、Bootstrap2中的table样式

 1 /*-----重写Bootstrap2中表格边框样式--*/
 2 .table-bordered2 {
 3     border: 1px solid #dddddd;
 4     border-collapse: separate;
 5     *border-collapse: collapse;
 6     border-left: 0;
 7     -webkit-border-radius: 4px;
 8     -moz-border-radius: 4px;
 9     border-radius: 4px;
10 }
11 
12 .table-bordered2 th,
13 .table-bordered2 td {
14     border-left: 1px solid #dddddd;
15 }
16 
17 .table-bordered2 caption + thead tr:first-child th,
18 .table-bordered2 caption + tbody tr:first-child th,
19 .table-bordered2 caption + tbody tr:first-child td,
20 .table-bordered2 colgroup + thead tr:first-child th,
21 .table-bordered2 colgroup + tbody tr:first-child th,
22 .table-bordered2 colgroup + tbody tr:first-child td,
23 .table-bordered2 thead:first-child tr:first-child th,
24 .table-bordered2 tbody:first-child tr:first-child th,
25 .table-bordered2 tbody:first-child tr:first-child td {
26     border-top: 0;
27 }
28 
29 .table-bordered2 thead:first-child tr:first-child > th:first-child,
30 .table-bordered2 tbody:first-child tr:first-child > td:first-child,
31 .table-bordered2 tbody:first-child tr:first-child > th:first-child {
32     -webkit-border-top-left-radius: 4px;
33     border-top-left-radius: 4px;
34     -moz-border-radius-topleft: 4px;
35 }
36 
37 .table-bordered2 thead:first-child tr:first-child > th:last-child,
38 .table-bordered2 tbody:first-child tr:first-child > td:last-child,
39 .table-bordered2 tbody:first-child tr:first-child > th:last-child {
40     -webkit-border-top-right-radius: 4px;
41     border-top-right-radius: 4px;
42     -moz-border-radius-topright: 4px;
43 }
44 
45 .table-bordered2 thead:last-child tr:last-child > th:first-child,
46 .table-bordered2 tbody:last-child tr:last-child > td:first-child,
47 .table-bordered2 tbody:last-child tr:last-child > th:first-child,
48 .table-bordered2 tfoot:last-child tr:last-child > td:first-child,
49 .table-bordered2 tfoot:last-child tr:last-child > th:first-child {
50     -webkit-border-bottom-left-radius: 4px;
51     border-bottom-left-radius: 4px;
52     -moz-border-radius-bottomleft: 4px;
53 }
54 
55 .table-bordered2 thead:last-child tr:last-child > th:last-child,
56 .table-bordered2 tbody:last-child tr:last-child > td:last-child,
57 .table-bordered2 tbody:last-child tr:last-child > th:last-child,
58 .table-bordered2 tfoot:last-child tr:last-child > td:last-child,
59 .table-bordered2 tfoot:last-child tr:last-child > th:last-child {
60     -webkit-border-bottom-right-radius: 4px;
61     border-bottom-right-radius: 4px;
62     -moz-border-radius-bottomright: 4px;
63 }
64 
65 .table-bordered2 tfoot + tbody:last-child tr:last-child td:first-child {
66     -webkit-border-bottom-left-radius: 0;
67     border-bottom-left-radius: 0;
68     -moz-border-radius-bottomleft: 0;
69 }
70 
71 .table-bordered2 tfoot + tbody:last-child tr:last-child td:last-child {
72     -webkit-border-bottom-right-radius: 0;
73     border-bottom-right-radius: 0;
74     -moz-border-radius-bottomright: 0;
75 }
76 
77 .table-bordered2 caption + thead tr:first-child th:first-child,
78 .table-bordered2 caption + tbody tr:first-child td:first-child,
79 .table-bordered2 colgroup + thead tr:first-child th:first-child,
80 .table-bordered2 colgroup + tbody tr:first-child td:first-child {
81     -webkit-border-top-left-radius: 4px;
82     border-top-left-radius: 4px;
83     -moz-border-radius-topleft: 4px;
84 }
85 
86 .table-bordered2 caption + thead tr:first-child th:last-child,
87 .table-bordered2 caption + tbody tr:first-child td:last-child,
88 .table-bordered2 colgroup + thead tr:first-child th:last-child,
89 .table-bordered2 colgroup + tbody tr:first-child td:last-child {
90     -webkit-border-top-right-radius: 4px;
91     border-top-right-radius: 4px;
92     -moz-border-radius-topright: 4px;
93 }

 

重写bootstrap组件CSS样式

标签:body   div   pdo   tst   重写   ado   select   表格   去除阴影   

原文地址:https://www.cnblogs.com/yapin/p/11830883.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!