CODEWITHSUNDEEP
htmlcss
rimi
rimi

Reputation: 775

shadow around the text box

I am very new to CSS. I am told to create the text box just like so:

enter image description here

My supervisor wants the shadow around the box when clicked and then same kind of text box. How can I achieve this.

Any help will be really appreciated.

Upvotes: 3

Views: 3314

Answers (3)

Senatrius
Senatrius

Reputation: 145

You would usually use a :focus pseudo-class and box-shadow attribute to achieve something like this. In your case, CSS would look roughly like this

input:focus {
      box-shadow: 0 0 5px #acdfea;
    }
<input class="input" />

Modify the values for color and the spread of the shadow as needed.

Read up more on the :focus pseudo-class here https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

Upvotes: 3

22moonriver
22moonriver

Reputation: 109

Use the <input> HTML element to create your text box.

<input type="text" name="Business Name">

The browser should automatically create that type of shadow with the highlight colour set in the computer.

The input element has so many attributes and input types that I won't list them here, but I recommend checking out the MDN docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input.

If you want to put "Business Name" above your text box, it's best practice to use a label:

<label for="business-name">Business Name</label>
<input type="text" id="business-name">

Make sure that the id matches for both tags so that they reference one another.

Upvotes: 4

Mechanic
Mechanic

Reputation: 5380

you can use focus pseudo selector to style an element when it is on focus 

.input-field:focus{
  box-shadow: 3px 3px 4px  rgba(0,0,0,.5);
}
<input class="input-field" />

Upvotes: 7

Related Questions