CODEWITHSUNDEEP
css
user2129623
user2129623

Reputation: 2257

Add css style to textbox

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

What wrong please correct.

Fiddle

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

Upvotes: 0

Views: 115

Answers (4)

shankar
shankar

Reputation: 614

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

Upvotes: 1

SaturnsEye
SaturnsEye

Reputation: 6499

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

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

Upvotes: 2

James Donnelly
James Donnelly

Reputation: 128791

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).

Upvotes: 2

AGB
AGB

Reputation: 2448

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

.in1 { }

Upvotes: 4

Related Questions