How do I Add border to text in inputfield

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

Answers


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

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

Need Your Help

Business logic class

c#

I have come across a few ways to write a business logic in asp.net but I am wondering for 2 example below, what are the benefits of using a struct to store class variables:

How to “check in” changes on both database and code by just one tag using ODT?

oracle tfs plsql odt

I work in a team developing a .NET code in VS environment as well as an Oracle database in PL/SQL. Now we want to use the Team Foundation Server as version control getting help of Oracle Developer ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.