Skip to content
Submitted 4 months ago

Interactive card details

express, node, tailwind-css, jquery
Oluchi Onyeguke•290
@lulublake
A solution to the Interactive card details form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Code

Please log in to post a comment

Log in

Community feedback

  • Temiboss1•440
    @Temiboss1

    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.

    Marked as helpful
  • MEHNOOR SHAHBAZ•720
    @Mahnoor366880

    You can adjust the border-radius of an input field when it's in focus using CSS. Here’s how you can do it:

    input { border-radius: 5px; /* Default border-radius / transition: border-radius 0.3s ease; / Smooth transition */ }

    input:focus { border-radius: 10px; /* Adjusted border-radius when focused / outline: none; / Optional: removes default focus outline / border: 2px solid #007bff; / Optional: changes border color on focus */ }

    Explanation:

    The border-radius property sets the rounded corners of the input field.

    transition: border-radius 0.3s ease; ensures a smooth effect when changing the border-radius.

    input:focus applies the new border-radius when the field is clicked or selected.

    This will make the input field's corners more rounded when in focus! 🚀

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord