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

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 位用于 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;
}