如何在输入字段中将边框添加到文本 [英] How do I Add border to text in inputfield

问题描述

我想知道如何使用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.

JSfiddle试图解释我的意思

<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.

谢谢

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

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

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