Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Formularelemente Dateiupload

Verwendung

Verwendung innerhalb von Formularen zum Anhängen von Dateien.

Vorschau

HTML

                
                  <br/>
<div class="container">
  <div class="form">
    <fieldset>
      <h3 class="fieldset_title">Upload</h3>
      <div class="fieldset_inner">
        <div class="fields_wrapper row">
          <div class="field_wrapper field_regular col-xs-12 col-sm-6 field_filemail">
            <div class="field_wrapper_inner">
              <label>Upload</label>
              <div class="form_field">
                <input type="file" class="cms_gui_textbox schoeck_fileselector" tabindex="9">
              </div>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
</div>

CSS

              @charset "UTF-8";
.form input[type=file] {
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  color: #4c4c4c;
  font-size: 14px;
  font-size: 0.875rem;
  padding: 10px 15px;
  transition: 0.2s border-color ease;
  width: 100%;
}
.form input[type=file]:focus {
  border-color: #939393;
  outline: none;
}

input {
  -moz-appearance: none;
  -webkit-appearance: none;
}
input::-webkit-input-placeholder {
  color: #b3b3b3 !important;
}
input:-moz-placeholder {
  color: #b3b3b3 !important;
}
input::-moz-placeholder {
  color: #b3b3b3 !important;
}
input:-ms-input-placeholder {
  color: #b3b3b3 !important;
}

.form .content_wrapper {
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .form .content_wrapper {
    margin-bottom: 30px;
  }
}
.form fieldset {
  position: relative;
}
.form fieldset:before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(215, 215, 215, 0)), color-stop(5%, #d7d7d7), color-stop(95%, #d7d7d7), color-stop(100%, rgba(215, 215, 215, 0)));
  background-image: -moz-linear-gradient(left, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
  background-image: -webkit-linear-gradient(left, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
  background-image: linear-gradient(to right, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
  background-size: 100%;
  content: '';
  display: block;
  height: 1px;
  width: 100%;
}
.form fieldset .fieldset_title {
  background-color: #fff;
  display: inline-block;
  padding-right: 10px;
  position: relative;
  text-align: left;
  top: -13px;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 25px;
  line-height: 1.5625rem;
}
@media screen and (max-width: 767px) {
  .form fieldset .fieldset_title {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    line-height: 1.375rem;
  }
}
@media screen and (max-width: 400px) {
  .form fieldset .fieldset_title {
    font-size: 17px;
    font-size: 1.0625rem;
    line-height: 21px;
    line-height: 1.3125rem;
  }
}
@media screen and (max-width: 350px) {
  .form fieldset .fieldset_title {
    font-size: 16px;
    font-size: 1rem;
    line-height: 20px;
    line-height: 1.25rem;
  }
}
@media screen and (max-width: 767px) {
  .form fieldset .fieldset_title {
    top: -10px;
  }
}
.form fieldset .fieldset_inner {
  margin-top: -24px;
  padding: 55px 0;
}
@media screen and (max-width: 767px) {
  .form fieldset .fieldset_inner {
    margin-top: -19px;
  }
}
.form fieldset.no_title .fieldset_inner {
  margin-top: 0;
}
.form fieldset:last-child .fieldset_inner:not(.keep-space) {
  padding-bottom: 0;
}
.form .fields_wrapper .field_wrapper {
  margin-bottom: 22px;
}
.form .fields_wrapper .field_wrapper:last-child {
  margin-bottom: 0;
}
.form .fields_wrapper .field_wrapper.field_clear {
  clear: both;
}
.form .fields_wrapper .field_wrapper.field_filemail .field_wrapper_inner {
  position: relative;
}
.form .fields_wrapper .field_wrapper.field_filemail .field_wrapper_inner label {
  position: absolute;
  top: -6px;
  left: 15px;
  z-index: 10;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 14px;
  line-height: 0.875rem;
  color: #7c7c7b;
  background-color: #fff;
  padding: 0 5px;
}

SCSS

              @import "../general/_general";

$form-border-grey:#d9d9d9;
$form-border-grey-focus:#939393;
$form-error-background:#fff2f3;
$form-error-text:#d50101;

.form {
  input[type=file] {
    background-color:#fff;
    @include border-radius(6px);
    border:1px solid $form-border-grey;
    color:$darkergrey;
    @include rem-font-size(14);
    padding:10px 15px;
    @include transition($linkcolor-transition-duration border-color ease);
    width:100%;

    &:focus {
      border-color:$form-border-grey-focus;
      outline:none;
    }
  }
}

input {
  @include placeholder {
    color:$grey !important;
  }

  -moz-appearance:none;
  -webkit-appearance:none;
}

.form {
  .content_wrapper {
    margin-bottom:50px;

    @media screen and (max-width:767px) {
      margin-bottom:30px;
    }
  }

  fieldset {
    position:relative;

    &:before {
      background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiP…Igd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);
      background-image:-webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(215, 215, 215, 0)), color-stop(5%, #d7d7d7), color-stop(95%, #d7d7d7), color-stop(100%, rgba(215, 215, 215, 0)));
      background-image:-moz-linear-gradient(left, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
      background-image:-webkit-linear-gradient(left, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
      background-image:linear-gradient(to right, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
      background-size:100%;
      content:'';
      display:block;
      height:1px;
      width:100%;
    }

    .fieldset_title {
      background-color:$white;
      display:inline-block;
      padding-right:10px;
      position:relative;
      text-align:left;
      top:-13px;

      @include rem-font-size(20);
      @include rem-line-height(25);

      @media screen and (max-width:767px) {
        @include rem-font-size(18);
        @include rem-line-height(22);
      }

      @media screen and (max-width:400px) {
        @include rem-font-size(17);
        @include rem-line-height(21);
      }

      @media screen and (max-width:350px) {
        @include rem-font-size(16);
        @include rem-line-height(20);
      }

      @media screen and (max-width:767px) {
        top:-10px;
      }
    }

    .fieldset_inner {
      margin-top:-24px;

      padding:55px 0;

      @media screen and (max-width:767px) {
        margin-top:-19px;
      }
    }

    &.no_title {
      .fieldset_inner {
        margin-top:0;
      }
    }

    &:last-child {
      .fieldset_inner:not(.keep-space) {
        padding-bottom:0;
      }
    }
  }

  .fields_wrapper {
    .field_wrapper {
      margin-bottom:22px;

      &:last-child {
        margin-bottom:0;
      }

      &.field_clear {
        clear:both;
      }


      &.field_filemail {
        .field_wrapper_inner {
          position:relative;

          label {
            position:absolute;
            top:-6px;
            left:15px;
            z-index:10;
            @include rem-font-size(12);
            @include rem-line-height(14);
            color:$darkgrey;
            background-color:$white;
            padding:0 5px;

          }
        }
      }
    }
  }
}