内容可编辑跨度（内联块）Webkit浏览器中的垂直对齐插入符号

Question

I have form made with contenteditable spans and my problem is that on focus my span is not vertical align better said the caret is not in the middle of span. I would like to have it in the middle and fully visible but also with scalable width so span should not be a dispaly: block neither inline.

Picture : http://i62.tinypic.com/125kri8.jpg This is the issue i want it in the middle but also the caret must be fully visible

DEMO : http://jsfiddle.net/hqf8apwr/

HTML

 <form action="">
  <ul class=form-input>
   <li>
    <span class="input-span" contenteditable="true" data-width=30 data-placeholder="Vaše meno"></span>
  </li>
  <li>
   <span class="input-span" contenteditable="true" data-width=30 data-placeholder="Spoločnosť"></span>
  </li>
  <li>
   <span class="input-span" contenteditable="true" data-width=30 data-placeholder="Pracovná pozícia"></span>
  </li>
  <li>
   <span class="input-span" contenteditable="true" data-width=30 data-placeholder="Telefónne číslo"></span>
  </li>
  <li>
   <span class="input-span" contenteditable="true" data-width=30 data-placeholder="Emailová adresa"></span>
  </li>
 </ul>
</form>

CSS

 li {
   list-style: none;
 }
 form {
   text-align: center;
   position: relative;
   left: -100px;
 }
 form > ul {
   margin: 0 auto;
 }
 form > ul > li {
   height: 60px;
   line-height: 60px;
   display: inline-block;
   font-size: 1.2em;
 }
 form .form-label {
   text-align: right;
   padding-right: 25px;
   color: black;
}
form .form-input {
   text-align: left;
   width: 200px;
   position: absolute;
   top: 0;
}
form .form-input li {
   height: 60px;
} 
form .form-input span {
   font-size: 1em;
   border-bottom: 2px solid orange;
   padding: 15px 20px;
   margin-bottom: -20px;
   white-space: nowrap;
   display: inline-block;
   height: 20px;
   line-height: 20px;
   max-width: 260px;
   overflow-x: hidden;
   background: #fff;
   color: #000;
}
form .form-input span.input-span[contenteditable]:focus {
   display: inline-block;
   font-size: 1em;
   padding-top: 20px;
   padding-bottom: 40px;
   overflow: hidden;
   background: orange;
   color: #fff;
   margin-top: 2px;
   padding-bottom: 20px;
}
form .form-input span.input-span[contenteditable]:empty::before {
   content: attr(data-placeholder);
}
form .form-input span.input-span[contenteditable]:empty:focus::before {
   content: '';
}

Answer 1

Just add vertical align

vertical-align: middle;

See your fiddle:

http://jsfiddle.net/u1ba8eve/2

Answer 2

One easy way to fix the caret position would be to move the padding to the li element. The result isn't exactly the same - the bottom border for example takes the whole width instead of only width of placeholder text and the blue outline is only on the text - but with some tweaking you may be able to get wanted result.

li
{
    padding: 15px 20px;
    border-bottom: 2px solid orange;
}
.form-input span {
  font-size: 1em;
  color: #000;


  white-space: nowrap;
  display: inline-block;
  height: 20px;
  line-height: 20px;
}

http://jsfiddle.net/564hjw8w/1/

EDIT

If you want to keep an outline, you only need to give your span a width. You can also give it an offset so it has the same look as before. But note that outline-offset isn't supported by Internet Explorer

   .form-input span.input-span[contenteditable]:focus
{
    width: 100px;
    outline-offset: 15px;
}

http://jsfiddle.net/564hjw8w/3/

Answer 3

You can achieve some decent look by removing your fixed height and padding from the span . And use padding and/or margin only on li to control your spacing ( as suggested by Julien ). But, continue using border-bottom on span to give it a variable width effect.

Here is a sample fiddle: http://jsfiddle.net/abhitalks/s3jmqh20/3/

Tested in IE-11, GC-43, FF-38, and AS-5.1.7 (FF shows a vertical offset initially when content is absent, type in something and it corrects itself. No workaround for that)

This also allows you to change the font-size without worrying about breaking the spacing too much. Try changing the size in the fiddle/snippet.

Snippet :

 * { box-sizing: border-box; margin: 0; padding: 0; } ul.form-input { text-align: left; width: 200px; list-style: none; margin-left: 12px; } ul.form-input li { margin: 6px 0px; padding: 12px 0px; } ul.form-input span { display: inline-block; color: #000; white-space: nowrap; padding: 0px 16px; border-bottom: 2px solid orange; font-size: 1em; line-height: 2em; } ul.form-input span.input-span[contenteditable]:empty::before { content: attr(data-placeholder); } ul.form-input span.input-span[contenteditable]:empty:focus::before { content:'\\00a0 '; } ul.form-input span.input-span[contenteditable]:focus { background-color: orange; color: #fff; } 

 <form action=""> <ul class=form-input> <li><span class="input-span" contenteditable="true" data-width=30 data-placeholder="Vaše meno"></span></li> <li><span class="input-span" contenteditable="true" data-width=30 data-placeholder="Spoločnosť"></span></li> <li><span class="input-span" contenteditable="true" data-width=30 data-placeholder="Pracovná pozícia"></span></li> <li><span class="input-span" contenteditable="true" data-width=30 data-placeholder="Telefónne číslo"></span></li> <li><span class="input-span" contenteditable="true" data-width=30 data-placeholder="Emailová adresa"></span></li> </ul> </form>