CODEWITHSUNDEEP
css
user15786184
user15786184

Reputation:

how can I get this kind of box shadow or outline?

Is this a box shadow or an outline? I'm confused because outlines can't have radius property and box shadows have blur effect.enter image description here

Upvotes: 0

Views: 493

Answers (3)

Nitheesh
Nitheesh

Reputation: 20006

That can be a combination of border and box-shadow and outline: none.

I have added the border and box-shadow to default state, if needed we can move that to :focus

body {
  padding: 10px;
  zoom: 250%;
}

.custom {
  width: 100%;
  height: 30px;
  border-radius: 5px;
  border: 2px solid #0000ff;
  box-shadow: 0 0 0 2pt rgb(0 0 255 / 30%);
}

.custom:focus {
  outline: none;
}
<input type="text" class="custom">

Upvotes: 0

Talia Asghar
Talia Asghar

Reputation: 24

You can achieve the required styling by adding the following properties to your input style. You can play around it here: https://codepen.io/taleyamirza/pen/ExmzYJr

input:focus { 
  outline-color: #6c8afc;
  border-color: #9ecaed;
  box-shadow:0 0 10px #6c8afc;
  -moz-box-shadow: 0px 0px 4px #6c8afc;
  -webkit-box-shadow: 0px 0px 4px #6c8afc;
}

Upvotes: 0

nicholas_jarretta
nicholas_jarretta

Reputation: 34

Use an outline with a rgba color on an input with a border radius:

input {
  border: 1px solid #ae11fc;
  border-radius: 0.5rem;
  font-size: 1rem;
  height: 2rem;
}

input:focus {
  outline: #ae11fc44 solid 0.2rem;
}

Checkout out this fiddle

Upvotes: 0

Related Questions