Split Button with Default design - html

Question

I am trying to create a split button that looks like the default button, but every time I remove the border to create the split button, the arrow button loses its styling.
So, I want it to look like this:
But instead, I am getting this:
What am I missing? Here's the code:
.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="">▼</button>
<ul class="splitbtn-drop-menu">
<li>Assign Vaccines</li>
<li>Unassign Vaccines</li>
</ul>
</div>

Answer 1

The default style of a button elements varies by browsers and operating systems, as the case with all the form elements.
The default styling in your case is given by the browser, from what I can see it seems to be Chrome, so if you apply any CSS to the buttons it will fallback to the default OS styling.
Though in your case the buttons style is changed to an even different one. I found out that it is because it only contains non-ASCII.
Adding a span with a white-space seems to be working with it (will also work without the span, just enter a space.)
<button class="splitbtn splitbtn-drop" data-bind="">▼ <span> </span></button>
Anyways the default styling is changed to the default OS style, in my case Windows 8.
Use custom CSS styles to make it look like the default:
.splitbtn {
background-color: ButtonFace;
-webkit-appearance: none;
border: 1px outset #999;
background-image: -webkit-linear-gradient(90deg, #ccc, #fff);
}
Do remember to use vendor prefixes for other browsers as well for the background-image property and also change background: ButtonFace; to background-color: ButtonFace;
You have to style the buttons completely in order to make it consistent. Else the inconsistency between the browser's and OS' default styling would persist.
Here's a demo with full code:
.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="">▼<span> </span></button>

Answer 2

Just give:
border-style: solid;