UCI

Access Select Net: Hipotecas Default 

<div class="access-select-net">
    <select name="select">
        <option value="option0" selected>Nombre del primer titular</option>
        <option value="option1">Titular 1</option>
        <option value="option2">Nombre muy largo del Titular 2</option>
    </select>
</div>
 
<div class="access-select-net{{#if disabled}} disabled{{/if}}{{#if error}} error{{/if}}" {{#if id}}id="{{ id }}"{{/if}}>
<select name="select"{{#if disabled}} disabled{{/if}}>
  {{#each option}}
    <option value="{{value}}"{{#if selected}} selected{{/if}}>{{text}}</option>
  {{/each}}
</select>
</div>
 
{
  "option": [
    {
      "value": "option0",
      "text": "Nombre del primer titular",
      "selected": true
    },
    {
      "value": "option1",
      "text": "Titular 1"
    },
    {
      "value": "option2",
      "text": "Nombre muy largo del Titular 2"
    }
  ]
}
  • Content: 
    .access-select-net {
    position: relative;
    select {
        position: relative;
        display: block;
        width: 100%;
        padding: 14px 20px 10px 15px;
        outline: none;
        border: 1px solid var(--color-grey3);
        font-family: 'Jornada Sans Book';
        font-size: 14px;
        line-height: 24px;
        color: var(--color-secondary);
        background-color: transparent;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;

        @media (--viewport-ms-min) {
            padding-right: 30px;
        }

        option {
            color: var(--color-secondary);
        }
        option:first-of-type {
            color: var(--color-grey2);
        }
        option::before {
            content: " ";
            padding: 10px;
            line-height: 100px;
        }
    }
    &::after {
        content: '>';
        font-size: 23px;
        color: #333;
        transform: rotate(90deg);
        right: 20px;
        top: 7px;
        padding: 0 0 2px;
        position: absolute;
        pointer-events: none;
    }

    &.disabled {
        select{
        background-color: var(--color-grey-light);
        border-color: var(--color-quinary);
        }
    }

    &.error {
        select{
            border-color: var(--color-danger);
        }
    }
}
  • URL: /components/raw/access-select-net/access-select-net.css
  • Filesystem Path: src/02-molecules/access-select-net/access-select-net.css
  • Size: 1.3 KB

No notes defined.