Skip to content

Instantly share code, notes, and snippets.

@yuis-ice

yuis-ice/index.html

Created October 30, 2023 04:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yuis-ice/8fdcdbf379bdecbdede5afa2fd816c9c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yuis-ice/8fdcdbf379bdecbdede5afa2fd816c9c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yuis-ice created this gist Oct 30, 2023.
    16 changes: 16 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    <div class="field">
    <div class="field__head">
    <label class="field__ttl" for="select">Select box title</label>
    <span class="field__tag is-require">Required</span>
    </div>
    <div class="field__body">
    <div class="select-box">
    <select name="select" id="select" required>
    <option selected hidden>Please select</option>
    <option value="#">select 1</option>
    <option value="#">select 2</option>
    <option value="#">select 3</option>
    </select>
    </div>
    </div>
    </div>
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    7 changes: 7 additions & 0 deletions simple-select-box.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Simple Select box
    -----------------


    A [Pen](https://codepen.io/Yamataka-Syourin/pen/JjxPBXw) by [TSURUOKA TAKSHI](https://codepen.io/Yamataka-Syourin) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/JjxPBXw).
    94 changes: 94 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,94 @@
    @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

    body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #1d1e22;
    font-family: Montserrat;
    }

    /* select box
    ---------------------------------------------------------*/
    .field {
    width: calc(100% - 20px);
    max-width: 80vw;
    margin-inline: auto;
    }

    .field__head {
    display: flex;
    align-items: center;
    gap: 15px;
    }

    .field__ttl {
    color: #ddd;
    font-family: inherit;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    }

    .field__tag {
    padding: 6px 9px;
    border-radius: 2px;
    color: #ddd;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 100%;

    &.is-require {
    background: #ee8013;
    }
    }

    .field__body {
    margin-top: 15px;
    }

    .select-box {
    position: relative;
    width: 100%;
    border-radius: 5px;
    background: #ddd;
    z-index: 1;

    &::after {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 8px;
    height: 8px;
    border-right: 3px solid #333;
    border-bottom: 3px solid #333;
    transform: translateY(-50%) rotate(45deg);
    content: "";
    z-index: -1;
    }
    }

    /* Reset default style */
    select {
    appearance: none;
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    }

    /* Reset default style for IE */
    select::-ms-expand {
    display: none;
    }

    select {
    padding: 15px;
    width: inherit;
    color: #333;
    font-size: 20px;
    font-weight: 400;
    font-family: inherit;
    }
    1 change: 1 addition & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet" />