Search code examples
htmlcssalignmenttextarea

Displaying Span as Textarea with CSS

I have this code:

.input {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 1em;
  max-width: 350px;
  width: calc(100% - 2em);
  vertical-align: middle;
}
.input:focus{
      outline-offset: -2px;
  
}
.input__field {
  position: relative;
  display: block;
  float: right;
  padding: 0.8em;
  width: 60%;
  border: none;
  border-radius: 0;
  background: #f0f0f0;
  color: #aaa;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-appearance: none;
  /* for box shadows to show on iOS */
}

.input__field:focus {
  outline: none;
}

.input__label {
  display: inline-block;
  float: right;
  padding: 0 1em;
  width: 40%;
  color: #6a7989;
  font-weight: bold;
  font-size: 70.25%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.input__label-content {
  position: relative;
  display: block;
  padding: 1.6em 0;
  width: 100%;
}

.span-texatarea {
    overflow: auto;
    height: 8rem;
    resize: vertical;
    vertical-align: top !important;
    text-transform: none;
    color: inherit;
    font: inherit;
    border: none;
    outline: 0;
    margin: 0;
    -webkit-appearance: textarea;
    appearance:textarea;
    flex-direction: column !important;
    white-space: pre-wrap !important;
    word-wrap: break-word;
    display: inline-block;
    text-align: start;
    -webkit-writing-mode: horizontal-tb;
}




/* Kaede */

.input--kaede {
  display: block;
  overflow: hidden;
  margin: 1em auto 2em;
  background: #EFEEEE;
}

.input__field--kaede {
  position: absolute;
  top: 0;
  right: 100%;
  width: 60%;
  height: 100%;
  background: #fff;
  color: #9DABBA;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__label--kaede {
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
  cursor: text;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__label-content--kaede {
  padding: 1.5em 0;
}

.input__field--kaede:focus,
.input--filled .input__field--kaede {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition-delay: 0.06s;
  transition-delay: 0.06s;
}

.input__field--kaede:focus + .input__label--kaede,
.input--filled .input__label--kaede {
  -webkit-transform: translate3d(60%, 0, 0);
  transform: translate3d(60%, 0, 0);
  pointer-events: none;
}

@media screen and (max-width: 34em) {
  .input__field--kaede:focus + .input__label--kaede,
  .input--filled .input__label--kaede {
    -webkit-transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
    transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
    pointer-events: none;
  }
}

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
<span class="input input--kaede">
					<input class="input__field input__field--kaede" type="text" id="input-35" />
					<label class="input__label input__label--kaede" for="input-35">
						<span class="input__label-content input__label-content--kaede">Full Name</span>


</label>
</span>

<span class="input input--kaede">
					<input class="input__field input__field--kaede" type="text" id="input-36" />
					<label class="input__label input__label--kaede" for="input-36">
						<span class="input__label-content input__label-content--kaede">E-Mail</span>


</label>
</span>

<span class="input input--kaede">
					<input class="input__field input__field--kaede" type="text" id="input-37" />
					<label class="input__label input__label--kaede" for="input-37">
						<span class="input__label-content input__label-content--kaede">Phone Number</span>


</label>
</span>

<span class="input input--kaede">
					<input class="input__field input__field--kaede" type="text" id="input-38" />
					<label class="input__label input__label--kaede" for="input-38">
          <span class="input__label-content input__label-content--kaede span-texatarea">Message 
          </span>


</label>
</span>

https://jsfiddle.net/css_stroller/6ag9j836/

And I basically want that "message span element" to be displayed like a Textarea but with the transition animation on focus. To be more specific: As soon as Message Area is on focus the animation and style should be similar to the other spans but word typing should start at the top with word wrap on and auto break, just like a normal textarea would. I've tried adding a new class "span-textarea" and tried using

 appearance:textarea;

But that didn't help.

Also the label "Message" should be on 

 vertical-align:middle;

So that it's centered within the box, but it doesn't work. I'm not quite sure if that's possible.

Solution

  • I've replaced input with textarea and add flexbox styles span text centering. Demo:

    .input {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 1em;
  max-width: 350px;
  width: calc(100% - 2em);
  vertical-align: middle;
}

.input:focus {
  outline-offset: -2px;
}

.input__field {
  position: relative;
  display: block;
  float: right;
  padding: 0.8em;
  width: 60%;
  border: none;
  border-radius: 0;
  background: #f0f0f0;
  color: #aaa;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-appearance: none;
  /* for box shadows to show on iOS */
}

.input__field:focus {
  outline: none;
}

.input__label {
  display: inline-block;
  float: right;
  padding: 0 1em;
  width: 40%;
  color: #6a7989;
  font-weight: bold;
  font-size: 70.25%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.input__label-content {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1.6em 0;
  width: 100%;
}

.span-texatarea {
  overflow: auto;
  height: 8rem;
  resize: vertical;
  vertical-align: top !important;
  text-transform: none;
  color: inherit;
  font: inherit;
  border: none;
  outline: 0;
  margin: 0;
  white-space: pre-wrap !important;
  word-wrap: break-word;
}

/* Kaede */
.input--kaede {
  display: block;
  overflow: hidden;
  margin: 1em auto 2em;
  background: #EFEEEE;
}

.input__field--kaede {
  position: absolute;
  top: 0;
  right: 100%;
  width: 60%;
  height: 100%;
  background: #fff;
  color: #9DABBA;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__label--kaede {
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
  cursor: text;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__label-content--kaede {
  padding: 1.5em 0;
}

.input__field--kaede:focus,
.input--filled .input__field--kaede {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition-delay: 0.06s;
  transition-delay: 0.06s;
}

.input__field--kaede:focus + .input__label--kaede,
.input--filled .input__label--kaede {
  -webkit-transform: translate3d(60%, 0, 0);
  transform: translate3d(60%, 0, 0);
  pointer-events: none;
}

@media screen and (max-width: 34em) {
  .input__field--kaede:focus + .input__label--kaede,
  .input--filled .input__label--kaede {
    -webkit-transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
    transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
    pointer-events: none;
  }
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}
    <span class="input input--kaede">
  <input class="input__field input__field--kaede" type="text" id="input-35" />
  <label class="input__label input__label--kaede" for="input-35">
    <span class="input__label-content input__label-content--kaede">Full Name</span>
  </label>
</span>

<span class="input input--kaede">
  <input class="input__field input__field--kaede" type="text" id="input-36" />
  <label class="input__label input__label--kaede" for="input-36">
    <span class="input__label-content input__label-content--kaede">E-Mail</span>
  </label>
</span>

<span class="input input--kaede">
  <input class="input__field input__field--kaede" type="text" id="input-37" />
  <label class="input__label input__label--kaede" for="input-37">
    <span class="input__label-content input__label-content--kaede">Phone Number</span>
  </label>
</span>

<span class="input input--kaede">
<textarea class="input__field input__field--kaede" type="text" id="input-38"></textarea>
  <label class="input__label input__label--kaede" for="input-38">
    <span class="input__label-content input__label-content--kaede span-texatarea">Message
    </span>
  </label>
</span>