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

问题描述

我想知道如何使用CSS自定义输入字段中的文本。
我想做的是在输入字段中写入的文本添加一个边框。

I'm trying to find out how I can customize the text in a input field with css.What I want to do is to add a border to the text written in the input field.

我可以自定义font-family，font-size

I can customize the font-family, font-size with the "input" in css but when I add a border it applies on the input field.

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

我试过搜索，但没有发现任何有用的确定这很容易，希望有人可以帮助我。

I've tried searching but didn't find anything useful, I'm sure this is easy and hopefully someone can help me.

谢谢

编辑：获取输入字段中的文本，如下所示：

I'm trying to get the text in the input field like this: http://i.imgur.com/zmBphb1.png

推荐答案

注意我在你的输入中添加了一个ID属性：id =myInput

notice I have put an ID attribute on your input: 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：

and your CSS is below. Notice the #myInput::-webkit-input-placeholder. #myInput targets your input box, and the webkit bit is for google..moz is for firefox, and ms-input-placeholder is for 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;
}

要将占位符文本的字体更改为笔触， p>

To change the font of the placeholder text to stroke, try this:

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

这篇关于如何在输入字段中将边框添加到文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！