<div class="c-block-input">
  <div class="c-block-input__items">
    <div class="c-block-input__title">テキストボックス
    </div>
    <input type="text" name="text" placeholder="テキストを入力してください。">
  </div>
</div>
.c-block-input__items {
  margin-bottom: 32px
}

.c-block-input__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  display: block
}

.c-block-input input[type="text"] {
  font-size: 16px !important;
  width: 100%;
  border: 1px solid #999;
  outline: none !important;
  box-shadow: none;
  height: 55px;
  padding: 2px 16px;
  border-color: #999;
  border-radius: 4px
}

.c-block-input input:focus {
  border-color: #E6A54D
}

.c-block-input ::-webkit-input-placeholder {
  color: #CCC
}

.c-block-input ::-moz-placeholder {
  color: #CCC
}

.c-block-input :-ms-input-placeholder {
  color: #CCC
}

.c-block-input ::-ms-input-placeholder {
  color: #CCC
}

.c-block-input ::placeholder {
  color: #CCC
}

.c-block-input ::-ms-input-placeholder {
  color: #CCC
}

.c-block-input :-ms-input-placeholder {
  color: #CCC
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.