College of Business Style Guide

Forms: Search Name 

<form>
    <div class="search-name">
        <input class="search-name-box" type="text" name="textfield" placeholder="Search by Name" />
        <label class="hidden" for="top-search-submit">Submit Search</label>
        <input id="search-name-submit" class="show" type="submit" value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</form>
 
<form>
    <div class="search-name">
    <input class="search-name-box" type="text" name="textfield" placeholder="Search by Name" />
    <label class="hidden" for="top-search-submit">Submit Search</label>
    <input id="search-name-submit" class="show" type="submit" value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</form>
 
{
  "legend": "Which are Creed Songs?",
  "list_items": {
    "1": {
      "key": 1,
      "item": "Radioactive"
    },
    "2": {
      "key": 2,
      "checked": "checked",
      "item": "With Arms Wide Open"
    },
    "3": {
      "key": 3,
      "item": "Ice, Ice, Baby"
    },
    "4": {
      "key": 4,
      "checked": "checked",
      "item": "Weathered"
    }
  }
}
  • Content: 
    .checkbox-list,
.radiobutton-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.form-item {
  margin: $space 0;

  &:first-of-type {
    margin: 0 0 $space 0;
  }

  &:last-of-type {
    margin: $space 0 0 0;
  }
}

.form-item__select,
input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=number],
textarea {
  font-size: 1rem;
}

.search-name {
  position: relative;

  .search-name-box {
    min-width: 300px;
    background: transparent url(../images/search-icon.jpg) no-repeat 98% center;
    background-size: 25px auto;
    height: 30px;
  }

  #search-name-submit {
    -webkit-appearance: none;
    box-sizing: inherit;
    padding: 0;
    border-width: 0;
    border-style: none;
    border-color: inherit;
    border-image: none;
    color: transparent;
    position: absolute;
    left: 250px;
    top: 1px;
    width: 55px;
    height: 30px;
    background-color: transparent;
  }
}

form {
  .hidden {
    visibility: hidden;
  }
}
  • URL: /components/raw/forms/forms.scss
  • Filesystem Path: components/01-elements/03-forms/forms.scss
  • Size: 984 Bytes
  • Handle: @forms--search_name
  • Preview:
  • Filesystem Path: components/01-elements/03-forms/forms--search_name.twig

No notes defined.