A Pen by Riley Shaw.

Custom-caret.markdown

Custom caret

A very ugly implementation of something that looks quite pretty.

A Pen by Riley Shaw on CodePen.

License.

index.slim

p#shell type here
input#ghost type='text'

script.coffee

$ghost = $('#ghost')
$shell = $('#shell')

$ghost.click ->
  $(this).val('')

$ ->
  $ghost.val($shell.text())

textCheck = ->
  cur = $ghost.val()
  if cur isnt oldVal
    $shell.text($ghost.val())
  oldVal = cur
  
sentinel = setInterval(textCheck, .1)

style.sass

@import "compass"
@keyframes blinky
  0%
    background: transparent
  100%
    background: black
@-webkit-keyframes blinky
  0%
    background: transparent
  100%
    background: black

input, p
  position: fixed
  top: 50%
  left: 0
  height: 80px
  line-height: 80px
  width: 100%
  margin-top: -40px
  vertical-align: middle
  text-align: center
  font-size: 60px
  font-family: 'Roboto', sans-serif
  
input
  color: transparent
  background-color: transparent
  border: 0
  outline: none

p:after, p:before
  content: ''
  display: inline-block
  width: 8px
  height: 60px
  vertical-align: middle
    
p:after
  position: relative
  bottom: 8px
  left: 8px
  background: #000
  animation: blinky 1s linear infinite alternate
  -webkit-animation: blinky 1s linear infinite alternate