Split button Display

INFORMATION & CODE

Split Button Display

What the Code Does

This code creates a custom "split button" user interface component, which combines a standard clickable button on the left with a dropdown menu arrow on the right. Visually styled using CSS to blend seamlessly together—complete with rounded outer corners and matching blue backgrounds—the component merges HTML structure, CSS styling, and JavaScript interactivity. The HTML defines a wrapper containing a main <button> element and a native HTML <select> dropdown element nested inside a label, while the CSS removes default browser appearances for the select dropdown, adds a custom downward- pointing triangle icon (▼), and sets up hover and active state colors.

How the Code Works

The mechanism works by placing a styled <select> element directly adjacent to a <button> element inside a relative wrapper, utilizing margins and positioning to make them look like a single, unified control. The JavaScript file enhances this by adding an event listener to the select dropdown, which listens for user interactions and is intended to dynamically update the text of the main button based on the user's selection from the dropdown list (though the provided JS references a .choices class that is not present in the HTML).

How to Use the Code

To use this code in your own web project, simply copy the HTML snippet into the body of your webpage, ensure the CSS is placed in a linked styles.css file (or within a <style> tag in the ), and link the JavaScript via a scripts.js file just before the closing <body> tag. You can easily customize the button text, dropdown choices, and color scheme by modifying the HTML option values and adjusting the background color properties (#0077ff) in the CSS stylesheet to match your website's design.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Split Button</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Split Button</h1>
    <div class="split_btn_wrap">
      <button class="split_btn">Option   </button>
      <label class="custom-select">
        <select>
          <option value="" hidden>Choices    </option>
          <option class="opt" value="1">Option 1</option>
          <option class="opt" value="2">Option 2</option>
          <option class="opt" value="3">Option 3</option>
        </select>
      </label>
    </div>
    <script src="scripts.js"></scripts>
  </body>
</html>

CSS


                      h1 {
        font-size: 24px;
        text-align: center;                 
      }
                  
      .split_btn_wrap {
        position: relative;
        width: 250px;
        margin: 30px 0 30px calc(50% - 62.5px);
      }
      
      .focus.split_btn_wrap {
        display: block;
      }
      
		  .active.split_btn_wrap {
		    display: none;
		  }
      
      .split_btn {
        position: relative;
        width: 140px;
        padding: 11px 20px 10px;
        display: inline-block;
        margin: 0;
        outline: none;
        line-height: 1.2;
        background-color: #0077ff;
        border: 0;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        color: #ffffff;
        font-family: "Courier New", monospace;
        font-size: 18px;
        font-weight: 900;
      }
      
      .split_btn:hover {
        background-color: #0055ff;
      }
      
      .split_btn:active {
        background-color: #0033ff;
      }
      
      .custom-select select {
        position: relative;
        max-width: 43px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 14px 10px 16px 20px;
        margin: 4px 0 0 -67px;
        background-color: #0077ff;
        border: 0;
        outline: 0;
        color: #0077ff;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
      }
      
      .custom-select select:hover {
        background-color: #0055ff;
      }
      
      .custom-select select:hover {
        background-color: #0033ff;
      }
      
      .custom-select:before {
        position: relative;
        content: "▼";
        line-height: 0px;
        padding: 0 17px 0 2px;
        color: #ffffff;
        font-family: fontAwesome, html5;
        font-size: 18px;
        font-weight: 900
        text-align: center;
        pointer-events: none;
        z-index: 1;
      }
      
      .no-pointer-events .custom-select:after {
        content: block;
      }
      
      option {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        min-width: 150px;
        padding: 5px 30px 5px 10px;
        color: #000000;
        background-color: #ddeeff;
        text-align: left;
      }

JAVASCRIPT


                      var inc = 0;
      const wrap = document.querySelector('.split_btn_wrap'),
            btn = document.querySelector('.split_btn'),
            opt = document.querySelectorAll('select'),
           
              

      for (i = 0; i < opt.length; i++) {
        inc = i;
        opt[inc].addEventListener('click', function() {
          if (inc === 0) {
            btn.innerHTML = 'Option ' + opt[0].value;
            
          }else if (inc === 1) {
            btn.innerHTML = 'Option ' + opt[1].value;
          }else{
            btn.innerHTML = 'Option ' + opt[2].value; 
          }
        });
      }

MENU

INFORMATION & CODE