How do I Add border to text in inputfield

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

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

Answer 2

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