Немного полезностей для кастомизации Bootstrap 4

Cкрыть стрелку после ссылки выпадающего списка

 
1
2
3
4
.dropdown-toggle::after {
   display: none;
  /* or opacity: 0; */
}

See the Pen Remove dropdown toogler arrow by Captain Anonymous (@ethicist) on CodePen.

Добавить уголок для выпадающего списка

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.dropdown-menu {
  margin-top: 10px;  
}
 
.dropdown-menu::before {
    border-bottom: 9px solid rgba(0, 0, 0, 0.2);
    border-left: 9px solid rgba(0, 0, 0, 0);
    border-right: 9px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    left: 5%;
    position: absolute;
    top: -8px;
}

.dropdown-menu::after {
    border-bottom: 8px solid white;
    border-left: 9px solid rgba(0, 0, 0, 0);
    border-right: 9px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    left: 5%;
    position: absolute;
    top: -7px;
}

See the Pen Dropdown menu arrow by Captain Anonymous (@ethicist) on CodePen.

 
1
2
3
4
5
.breadcrumb-item + .breadcrumb-item::before {
  color: #369;
  content: "→ ";
  padding: 0 5px;
}

See the Pen Customizing breadcrumb by Captain Anonymous (@ethicist) on CodePen.

Избавляемся от фонового цвета автозаполняемого поля в Chrome

 
1
2
3
4
5
6
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
}

See the Pen Remove Chrome autofill background color by Captain Anonymous (@ethicist) on CodePen.

Изменить вид полосы прокрутки как для страницы, так и для textarea

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
::-webkit-scrollbar {
  width: 17px;
  background: white;
}

::-webkit-scrollbar-thumb {
  border: none;
  background: linear-gradient(-134deg, #6161ee 0, #c471cc 100%);
  background-size: 18px;
  /*border-radius: 6px;*/
  /*border-top-left-radius: 6px;*/
  /*border-bottom-left-radius: 6px;*/
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(-134deg, #5050dd 0, #b360bb 100%);
}

::-webkit-scrollbar-track {
  background: #fafbfc;
  border: none;
}

See the Pen Customizing scrollbar by Captain Anonymous (@ethicist) on CodePen.

Изменить вид выделения текста

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
::selection {
  background: #6161ee;
  color: white;
}

::-moz-selection {
  background: #6161ee;
  color: white;
}

::-webkit-selection {
  background: #6161ee;
  color: white;
}

See the Pen Customizing selection by Captain Anonymous (@ethicist) on CodePen.

Изменить аттрибуты placeholder

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(153, 153, 153) !important;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgb(153, 153, 153) !important;
}

See the Pen Customizing placeholder by Captain Anonymous (@ethicist) on CodePen.