在表单内闪烁插入符号

Question

我希望在 twitter bootstrap 3 网站的表单内添加一个闪烁的插入符号/光标。有一个用于 html 和 css 的代码笔，但如果代码与引导程序一起使用，我需要有关在何处添加代码的帮助？我是新手，渴望学习，但我浏览了又浏览，没有得到任何结果。

codepen 在这里 http://codepen.io/ArtemGordinsky/pen/GnLBq

html
<span class="blinking-cursor">|</span>

css
.blinking-cursor {
font-weight: 100;
font-size: 30px;
color: #2E3D48;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}

@keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}

@-moz-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}

@-webkit-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}

@-ms-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}

@-o-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}

Answer 1

只需将输入和闪烁图标包装到一个容器中，然后将闪烁图标放置在输入内。

/* The container */
.input-container {
  position: relative;
}

/* Ensure the font-size is the same as the blinking icon */
.input-container input {
  border: 1px solid gray;
  font-size: 30px;
  padding:0 5px;
}

/* Position it where you want. Must be position: absolute! */
.input-container .blinking-cursor {
  position: absolute;
  left: 5px; /* The same as padding on the input */
}

/* This will hide the blinking cursor when the user clicks on the input */
.input-container input:focus + .blinking-cursor{
  visibility: hidden;
}

/* The code below is from the codepen: http://codepen.io/ArtemGordinsky/pen/GnLBq */
.blinking-cursor {
  font-weight: 100;
  font-size: 30px;
  color: #2E3D48;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}
@keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}
@-moz-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}
@-webkit-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}
@-ms-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}
@-o-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

<div class="input-container">
  <input type="text">
  <span class="blinking-cursor">|</span>
</div>

您可能想要进一步编辑样式，但这会让您朝着想要的方向前进。