Temiboss1

Latest comments

• 

  Oluchi Onyeguke•290

  @lulublake

  Submitted 4 months ago

  What challenges did you encounter, and how did you overcome them?

  I had a major challenge with styling the input while in focus. I was supposed to use a gradient color when the input was active or in focus. I was able to do that, but I think the method I used restricted me from adjusting the border radius, and it made the input box rectangular.

  What specific areas of your project would you like help with?

  I would like help with adjusting the border radius of my input field when it's in focus

  

  Interactive card details

  #express#node#tailwind-css#jquery

  2

  00
  

  Temiboss1•440

  @Temiboss1

  Posted 4 months ago

  There is a method that does not affect the border-radius.. you can use this next time

  input:focus, input:hover {

  outline: none;
  border: 2px solid transparent; /* To make sure your gradient is visible */
  background:linear-gradient(white, white) padding-box,
  linear-gradient(45deg, hsl(249, 99%, 64%),  hsl(278, 94%, 30%)) border-box;
  

  }

  when using background like this method you need to give the padding box and the border-box their colors so it wont paint the whole thing. the padding box is to make sure the padding box remains white.

  1

  Marked as helpful