如何仅使用html和CSS创建拆分按钮？

Question

I was wondering how to make a split button by using html & css only? Below is the code that I have so far:

HTML:

      <input type="button" id="butt1" name="splitbutton1" value="Test">
        <select id="splitbutton1select" name="splitbutton1select">
            <option value="0">Test1</option>
            <option value="1">Test2</option>
        </select>

CSS:

          #butt1{
     width: 45%;
     height: 5%;
     margin-left: 150px;
     font-size: xx-large;
     font-family: sans-serif;
     margin-bottom: 75px; 
     }

Answer 1

It totally depends on what the split buttons are for. I coded up a quick version of what I consider to be a split button, I hope it helps

https://codepen.io/stevestan/pen/QvNbGV?editors=1100

   <div class="home-bottom">
<div class="cool-but">
   <ul>
     <li class="z1"> <a href="">Reserve a Table</a></li>
     <li class="z2"> or </li>
     <li class="z3"> <a href="">Come &amp; Find Us</a></li>
   </ul>
</div>

 .cool-but {
  margin: 0 auto;
  display: block;
  width: 450px; }
  .cool-but ul .z1 {
    list-style: none;
    display: inline-block; }
    .cool-but ul .z1 a {
      background-color: #ea7f0a;
      padding: 1em 2em 1em 2em;
      color: white;
      margin-right: -10px;
      text-transform: uppercase;
      font-size: 0.8em;
      -webkit-border-radius: 10px;
      -webkit-border-top-left-radius: 50px;
      -webkit-border-bottom-left-radius: 50px;
      -moz-border-radius: 10px;
      -moz-border-radius-topleft: 50px;
      -moz-border-radius-bottomleft: 50px;
      border-radius: 10px;
      border-top-left-radius: 50px;
      border-bottom-left-radius: 50px; }
    .cool-but ul .z1 a:hover {
      background-color: #cc4b19 !important; }
  .cool-but ul .z2 {
    list-style: none;
    display: inline-block;
    position: relative;
    z-index: 99;
    background-color: #21387c;
    border-radius: 50px;
    padding: 1em;
    color: white;
    width: 60px;
    text-align: center; }
  .cool-but ul .z3 {
    list-style: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.8em; }
    .cool-but ul .z3 a {
      background-color: #ea7f0a;
      padding: 1em 2em 1em 2em;
      color: white;
      margin-left: -10px;
      -webkit-border-radius: 50px;
      -webkit-border-top-left-radius: 10px;
      -webkit-border-bottom-left-radius: 10px;
      -moz-border-radius: 50px;
      -moz-border-radius-topleft: 10px;
      -moz-border-radius-bottomleft: 10px;
      border-radius: 50px;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px; }
    .cool-but ul .z3 a:hover {
      background-color: #cc4b19; }

Answer 2

What i understood, i think you need this-

<style>
#butt1{
     width: 10%;
     height: 10%;
     margin-left: 150px;
     font-family: sans-serif;
     margin-bottom: 75px; 
     float:left;
     border: 0 none;
     background-color:#eee;
}
#splitbutton1select{
    border: 0 none;
    float:left;
    background-color:#eee;
    width: 5%;
    height: 10%;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}
</style>

For more fancy go to this link