How do I Add border to text in inputfield - css

Question

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.
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 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;
}
I've tried searching but didn't find anything useful, I'm sure this is easy and hopefully someone can help me.
Thank you
Edit: I'm trying to get the text in the input field like this: http://i.imgur.com/zmBphb1.png

Answer 1

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

Answer 2

Your css code is not correct: you forgot the ;
http://jsfiddle.net/6Gevu/10/
input {
border: 1px solid #000;
width: 200px;
padding: 20px;
font-size: 20px;
}