CODEWITHSUNDEEP
cssreactjsreact-hooks
Joseph
Joseph

Reputation: 7755

Put Outline When Focus on Input

How do you put an outline on an input with border-radius? Pls check my codesandbox here CLICK HERE

.code-inputs input:focus {
  outline: solid;
  border-radius: 10px;
}

Upvotes: 0

Views: 1800

Answers (5)

hazimdikenli
hazimdikenli

Reputation: 6029

you cannot do that with outline, just like outline box-shadow does not cause the elements to change size, so you can apply an outline like border on focus.

.code-inputs input {
  outline: none;
}
.code-inputs input:focus {
   box-shadow: purple 0 0 5px;
}

I removed the extra stuff, but feel free to play with it. Again the reason we use box-shadow is that when applied it will not change the size of the element so no reflow on the page.

Upvotes: 0

MattHamer5
MattHamer5

Reputation: 1491

You can sort of cheat doing this by using box-shadow instead of the outline - I've had the same issues in the past when using rounded input boxes. Probably not the best solution out there, but definitely does the job.

input {
  border-radius: 10px;
  height:30px;
  border: none;
  outline:none;
  box-shadow: 0 0 0 2px #4f5b66;
}
input:focus {
  border-color:transparent;
  border:none;
  box-shadow: 0 0 0 2px red;
}
<input type="text" />

JSFiddle

Upvotes: 0

Ryan Le
Ryan Le

Reputation: 8412

For that, you'd use shadow:

Change:

.code-inputs input:focus {
  outline: solid;
  border-radius: 10px;
}

To

.code-inputs input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, .5);
}

Example:

    input, input:focus {
        border: none;
        border-radius: 2pt;
        box-shadow: 0 0 0 1pt grey;
        outline: none;
        transition: .1s;
    }
    .text:focus {
        box-shadow: 0 0 0 2pt red;
    }
    <input type=text class="text">

Upvotes: 1

Vladislav Akhmetvaliyev
Vladislav Akhmetvaliyev

Reputation: 755

Replace outline with box-shadow

.code-inputs input:focus {
  outline: none;
  border-radius: 10px;
  box-shadow: 0 0 0 5px rgba(0, 123, 255, .5);
}

Upvotes: 1

Qiimiia
Qiimiia

Reputation: 607

Instead of outline: solid; use box-shadow: 0 0 0 3px;

Upvotes: 0

Related Questions