Кнопка разделения по умолчанию

Question

Я пытаюсь создать кнопку разделения, которая выглядит как кнопка по умолчанию, но каждый раз, когда я удаляю границу, чтобы создать кнопку разделения, кнопка со стрелкой теряет свой стиль.

Итак, я хочу, чтобы выглядеть следующим образом:

Но вместо этого, я получаю это:

Что мне не хватает? Вот код:

.splitbtn-group { 
 
     position: relative; 
 
     float: left; 
 
     margin-top: 5px; 
 
     margin-left: 15px; 
 
     display: inline-block; 
 
     height: 24px; 
 
    } 
 
    
 
    .splitbtn { 
 
     position: relative; 
 
     float: left; 
 
     left: 20px; 
 
     height: 24px; 
 
     vertical-align: middle; 
 
     font-family: Tahoma; 
 
     font-size: 12px; 
 
     background: ButtonFace; 
 
     color: ButtonText; 
 
     border: 2px outset ButtonFace; 
 
    } 
 
    
 
    .splitbtn.splitbtn-drop { 
 
     border-left: 0; 
 
    }

<div class="splitbtn-group"> 
 
     <button class="splitbtn splitbtn-main" data-bind=""> Assign Vaccines</button> 
 
     <button class="splitbtn splitbtn-drop" data-bind="">&#9660;</button> 
 
     <ul class="splitbtn-drop-menu"> 
 
      <li><a href="#">Assign Vaccines</a></li> 
 
      <li><a href="">Unassign Vaccines</a></li> 
 
     </ul> 
 
    </div>

Answer 1

стиль по умолчанию кнопки элементов зависит от браузеров и операционных систем, как и в случае со всеми элементами форм.

Дизайн по умолчанию в вашем случае задается браузером, поскольку я вижу, что он, кажется, Chrome, поэтому, если вы применяете CSS к кнопкам, он откидывается на стиль ОС по умолчанию.

Хотя в вашем случае стиль кнопок меняется на еще один. Я узнал, что это потому, что он содержит только не-ASCII.

Добавление пролета с белым пространством, кажется, работают с ним (также будет работать без промежутка, просто введите пробел.)

<button class="splitbtn splitbtn-drop" data-bind="">&#9660; <span> </span></button> 

В любом случае стиль по умолчанию изменяется в стиле ОС по умолчанию в моем случае стили для Windows 8.

Использование пользовательских CSS, чтобы сделать его выглядеть по умолчанию:

.splitbtn { 
    background-color: ButtonFace; 
    -webkit-appearance: none; 
    border: 1px outset #999; 
    background-image: -webkit-linear-gradient(90deg, #ccc, #fff); 
} 

, не забудьте использовать префиксы для других браузеров, а также для background-image property, а также изменить background: ButtonFace; на background-color: ButtonFace;

Вам необходимо полностью надеть кнопки, чтобы сделать его непротиворечивым. Иначе несогласованность между стилем браузера и ОС по умолчанию будет сохраняться.

Вот демо с полным кодом:

.splitbtn-group { 
 
    position: relative; 
 
    float: left; 
 
    margin-top: 5px; 
 
    margin-left: 15px; 
 
    display: inline-block; 
 
    height: 24px; 
 
} 
 

 

 
.splitbtn { 
 
    position: relative; 
 
    float: left; 
 
    left: 20px; 
 
    height: 24px; 
 
    vertical-align: middle; 
 
    font-family: Tahoma; 
 
    font-size: 12px; 
 
    background-color: ButtonFace; 
 
    color: ButtonText; 
 
    border: 2px outset ButtonFace; 
 
    
 
    -webkit-appearance: none; 
 
    border: 1px solid #999; 
 
    background-image: -webkit-linear-gradient(90deg, #ccc, #fff); 
 
} 
 

 
.splitbtn.splitbtn-drop { 
 
    border: 0; 
 
    -webkit-appearance: button; 
 
}

<div class="splitbtn-group"> 
 
    <button class="splitbtn splitbtn-main" data-bind=""> Assign Vaccines</button> 
 
    <button class="splitbtn splitbtn-drop" data-bind="">&#9660;<span> </span></button> 
 

Answer 2

Просто дайте:

border-style: solid;