assembler assembler -4 years ago 207
CSS Question

how to modify a div contenteditable to display bottom line from center to border on focus using css

I want to achieve the effect on the textfields on this page using css, but I need to apply it on a contenteditable div.

This is whay I did so far:

<style>
.container {
height: 35px;
width: 100%;
border: solid 1px rgba(0, 0, 0, .2);
margin-bottom: 5px;
overflow-x: auto;
padding-bottom: 10px;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.container:focus {
border-bottom: solid 2px black;
}
</style>


And this is the HTML:

<div id="editor" contenteditable="true" class="container" />


It turns the bottom line from nothing to black on focus and on focus lost it goes from black to fade. What I want is to show that very same line but from the center of the div to the borders on focus and on focus lost I want it to go from borders to center, as in the link.

Does anybody can help?
Thanks in advance.

Answer Source

You can't achieve this with just a border. Use :before and :after for this. Be sure you give your element a position: relative; so you can give your :before and :after a position: absolute;

.container {
  position: relative;
  height: 35px;
  width: 100%;
  border: 0;
  margin-bottom: 5px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.container:before,
.container:after {
  position: absolute;
  bottom: 0;
  content: '';
}

.container:before {
  left: 0;
  height: 1px;
  width: 100%;
  background: #e0e0e0;
  border-bottom: solid 1px rgba(0, 0, 0, .2);
  z-index: 1;
}

.container:after {
  position: absolute;
  left: 50%;
  height: 3px;
  width: 0;
  background: blue;
  border: 0;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
  transform: translateX(-50%);
  z-index: 2;
}

.container:focus {
  outline: 0;
}

.container:focus:after {
  width: 100%;
}

Example https://jsfiddle.net/skeurentjes/3brebpug/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download