Add css style to textbox

Question

Here I have created css effect for textbox. But it does not effect.

What wrong please correct.

css is as below:

in1
{
    border-radius: .2em;
    border: 1px solid #cccccc;

    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
}

in1:focus
{
    border-color: rgba(1, 168, 255, 0.8);
    outline: 0;
    outline: thin dotted \9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px     rgba(82,168,236,.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

Fiddle is not linked correctly

SaturnsEye
– SaturnsEye

2013-10-24 09:21:24 +00:00
Commented Oct 24, 2013 at 9:21 — SaturnsEye
– SaturnsEye, Commented Oct 24, 2013 at 9:21
Add correct fiddle link pls.

Igl3
– Igl3

2013-10-24 09:22:16 +00:00
Commented Oct 24, 2013 at 9:22 — Igl3
– Igl3, Commented Oct 24, 2013 at 9:22
for class you mention . for id you mention #

Vignesh Pichamani
– Vignesh Pichamani

2013-10-24 09:24:07 +00:00
Commented Oct 24, 2013 at 9:24 — Vignesh Pichamani
– Vignesh Pichamani, Commented Oct 24, 2013 at 9:24

AGB · Accepted Answer · 2013-10-24 09:21:36Z

4

You just need to put a full stop before your class names in your css e.g.

.in1 { }

answered Oct 24, 2013 at 9:21

AGB

2,45723 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2129623 Over a year ago

Thanks. But When I used same css on my local system, it does not show me same color effect as on fiddle.

AGB Over a year ago

Perhaps something else is overriding the style? If you inspect it using Firebug can you see the styles being applied?

user2129623 Over a year ago

May be. Firebug shows the style #text.style1. style1 is the name of the class.

AGB Over a year ago

That's not the name of your class in your original post though? I think you need to post more of your html/css.

James Donnelly · Accepted Answer · 2013-10-24 09:22:11Z

2

Class selectors are prefixed with a .. Here you're just using in1 which is an element selector. This attempts to select an element named "in1" (<in1 ... />).

Simply change your selectors to:

.in1 {
    ...
}

...and:

.in1:focus {
    ...
}

Working JSFiddle demo.

You can read more about CSS selectors in the official W3 documentation available here. From the same document's Class Selector section:

E.warning - an E element whose class is "warning" (the document language specifies how class is determined).

answered Oct 24, 2013 at 9:22

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Comments

SaturnsEye · Accepted Answer · 2013-10-24 09:22:17Z

2

without looking at your fiddle i'm guessing you're using classes.

try adding a "." to the start of your css, so: .in1

answered Oct 24, 2013 at 9:22

SaturnsEye

6,54512 gold badges50 silver badges65 bronze badges

Comments

Code Lღver · Accepted Answer · 2013-10-24 09:46:53Z

1

You must follow this, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”).

instead of in1{} put .in1{}

edited Oct 24, 2013 at 9:46

Code Lღver

15.6k16 gold badges61 silver badges75 bronze badges

answered Oct 24, 2013 at 9:26

shankar

6144 silver badges14 bronze badges

Collectives™ on Stack Overflow

Add css style to textbox

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related