Question

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

我可以使用css中的“input”自定义font-family，font-size，但是当我添加边框时，它会应用于输入字段。

<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;
}

Answer 2

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

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

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

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

2 个答案: