Question

我想在twitter bootstrap 3网站的表单中添加一个闪烁的插入/光标。有一个用于html和css的codepen，但如果代码与bootstrap一起使用，我需要在哪里添加代码？我是新人，渴望学习，但我已经浏览过并且浏览过没有结果。

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>

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

在表格内闪烁插入符号

1 个答案: