i have form made contenteditable spans , problem on focus span not vertical align better said caret not in middle of span. have in middle , visible scalable width span should not dispaly: block neither inline.
picture : http://i62.tinypic.com/125kri8.jpg issue want in middle caret must 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: ''; }
you can achieve decent removing fixed height , padding span. , use padding and/or margin on li control spacing (as suggested julien). but, continue using border-bottom on span give variable width effect.
here sample fiddle: http://jsfiddle.net/abhitalks/s3jmqh20/3/
tested in ie-11, gc-43, ff-38, , as-5.1.7 (ff shows vertical offset when content absent, type in , corrects itself. no workaround that)
this allows change font-size without worrying breaking spacing much. try changing size in 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>
Comments
Post a Comment