shadow around the text box

user_13157208 0
Viewed 164

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.

css html
3 Answers

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" />

user_59536100

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.

user_113739210

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

user_130240590
Related