如何在输入字段中为文本添加边框

Question

我正在尝试找出如何使用 css 自定义输入字段中的文本。 我要做的是为输入字段中写入的文本添加边框。

我可以使用 css 中的“输入”自定义字体系列、字体大小，但是当我添加边框时，它会应用于输入字段。

JSfiddle trying to explain what I mean

<input type="text" placeholder="Add border to this text" />

body {
  background-color: #ccc;
}

input {
  border: 1px solid #000
  width: 200px;
  padding: 20px;
  font-size: 20px;
}

我试过搜索，但没有找到任何有用的东西，我相信这很容易，希望有人可以帮助我。

谢谢

编辑：我正在尝试获取输入字段中的文本，如下所示：http://i.imgur.com/zmBphb1.png

Answer 1

请注意，我在您的输入中添加了 ID 属性：id="myInput"

    <input id="myInput" type="text" placeholder="Add border to this text" />
... and not the inputwindow itself.

你的 CSS 在下面。注意#myInput::-webkit-input-placeholder。 #myInput 以您的输入框为目标，webkit bit 用于 google..moz 用于 firefox，ms-input-placeholder 用于 Internet Explorer：

body {
    background-color: #ccc;
}

input {
    border: 1px solid #000
    width: 200px;
    padding: 20px;
        font-size: 20px;
}


#myInput::-webkit-input-placeholder {

 border-style:solid;
border-width:medium;
}
#myInput:-moz-placeholder {
 border-style:solid;
border-width:medium;
}
#myInput:-ms-input-placeholder {
 border-style:solid;
border-width:medium;
}

要将占位符文本的字体更改为笔划，请尝试以下操作：

#myInput::-webkit-input-placeholder {
 color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}
#myInput:-moz-placeholder {
color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#myInput:-ms-input-placeholder {
color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Answer 2

您的 css 代码不正确：您忘记了 ;

http://jsfiddle.net/6Gevu/10/

input {
  border: 1px solid #000;
  width: 200px;
  padding: 20px;
  font-size: 20px;
}