manipulating input value and content inside paragraph

Question

I was trying to manipulate the content inside the <p>tag. I want to target each element inside the paragraph. I have the following:

   <p class="num">123456789</p>

This is number is generated through a form and I wanted to add padding to each number through css so, is it possible? I tried a few things myself but it did not help.

my CSS:

   *p.num {padding-right:5px;}
   p.num * {padding-right:5px;}

Another thing is I was also trying to manipulate the value of input my code is:

   <input type="text" value="Name" placeholder="Name" />

I have used both value and placeholder because older IE does not support placeholder and that is why I wanted to target value so that I can disable it in new browsers. I have tried a few things on this one:

   input[value="Name"] {font-size:0;}
   input[value="Name"] {display:none;}

The first one zeroes out the placeholder as well and the second one hides the the input completely. So, I want to know if is there any possible CSS by which I can achieve this?

On the first part of the question, do you want some space between the numbers? You could use `letter-spacing: 5px` for that. On the second part, what is the desired result? — GreyRoofPigeon, Jul 15 '14 at 06:01
So what you want to do is to display **placeholder** in new browsers and **value** in the old ones?? — user63762453, Jul 15 '14 at 06:03
@LinkinTED the desired result is both being displayed on modern browsers and that I don't want. — fahad.kazi, Jul 15 '14 at 06:07
Upto which version of IE you don't want to show placeholder? — user63762453, Jul 15 '14 at 06:15

score 3 · Answer 1 · answered Jul 15 '14 at 06:01

3

For first question, the solution is pretty simple:

use this CSS rule,

p.num {
  letter-spacing: 1em;
}

answered Jul 15 '14 at 06:01

Sandesh Damkondwar

446
5
17

score 1 · Answer 2 · answered Jul 15 '14 at 06:03

1

Do you mean the letter spacing property? You would need to create an ID or class for the input box like this:

<input id="name" type="text" value="Name" placeholder="Name" />

and it's css would be something like this:

#name{ letter-spacing: 3px; }

answered Jul 15 '14 at 06:03

Azrael

1,094
8
19

score 1 · Answer 3 · answered Jul 15 '14 at 06:08

Your label says MANIPULATING INPUT AND PARA . SO i give you an example how to manipulate it.

Fiddle Demo

Explanation

  <form class="formclass">
    <p class="num">213213</p>
    <p class="num">213</p>
    <p class="notNum">sadas</p>

    <input type="text" value="vals"></input>
 </form>

CSS

.formclass p.num 
 {
   color: red;
 }

.formclass input[value="vals"]
{
   color: brown;
}

score 0 · Answer 4 · answered Jul 15 '14 at 06:10

0

for your first question you can try jquery

$('.num').css('padding-right','5px');

or basic more than jquery you can write pure css

.num{ padding-right:5px; }

answered Jul 15 '14 at 06:10

Furkan Başaran

1,927
2
19
28

score 0 · Answer 5 · edited May 23 '17 at 12:23

0

For spacing between letters, use:

p.num{letter-spacing:2px;}

For displaying content according to browser type, you will have to use conditional comments:

<!--[if IE]>
Place content here to target all Internet Explorer users.
<![endif]-->

<![if !IE]>
Place content here to target all users not using Internet Explorer.
<![endif]>

<!--[if gte IE 8]>
Place content here to target users of Internet Explorer 8 or higher.
<![endif]-->

<!--[if lt IE 7]>
Place content here to target users of Internet Explorer 6 or lower (less than 7).
<![endif]-->

This should help you.Read more

You may also want to check this answer on Stackoverflow itself.

edited May 23 '17 at 12:23

Community

1
1

answered Jul 15 '14 at 06:21

user63762453

1,734
2
22
44

1

I am already using less than IE 9 conditional comment and a different CSS file for those browsers but need a CSS solution. – fahad.kazi Jul 15 '14 at 06:26
1

I don't think its possible through pure CSS as per my knowledge, you may either use HTML or jacascript, or wait for other answers. – user63762453 Jul 15 '14 at 06:31

manipulating input value and content inside paragraph

5 Answers5