1

入力フィールドのテキストをcssでカスタマイズする方法を見つけようとしています。やりたいことは、入力フィールドに書かれたテキストにボーダーを追加することです。

css の「入力」を使用して font-family、font-size をカスタマイズできますが、境界線を追加すると入力フィールドに適用されます。

私の言いたいことを説明しようとする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;
}

検索してみましたが、役に立つものは見つかりませんでした。これは簡単だと思います。誰かが私を助けてくれることを願っています。

ありがとうございました

編集:次のように入力フィールドにテキストを取得しようとしています: http://i.imgur.com/zmBphb1.png

4

2 に答える 2

1

入力に ​​ID 属性を付けたことに注意してください: 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 用です。

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

プレースホルダー テキストのフォントをストロークに変更するには、次のようにします。

#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;
}
于 2013-05-02T19:39:43.133 に答える
0

css コードが正しくありません: ; を忘れました

http://jsfiddle.net/6Gevu/10/

input {
  border: 1px solid #000;
  width: 200px;
  padding: 20px;
  font-size: 20px;
}
于 2013-05-02T19:38:39.003 に答える