Remove focus ring & border from Django forms using TailwindCSS

user_13048225 0
Viewed 1927

Goal: No border or focus ring in Django form.

Current: I can currently only change certain attributes like text color & rounded corners but not border or focus. I am using django-widget-tweaks to assign class attributes to the form. I am using django-tailwindcss to use tailwind in Django.

Attempted: I am using the tailwind ring-0 & border-0 tailwind attributes but they are not functioning at all.

Code:

{% load widget_tweaks %}

<form action="{% url 'marketing:subscribe' %}" method="post">
    {% csrf_token %}
    {{ form.email|add_class:"bg-black rounded-lg border-0 ring-0 focus:ring-0" }}
    <button class="text-green-300" type="submit">Subscribe</button>
</form>
tailwind-css django python
2 Answers

try adding the class "focus:outline-none". Works with buttons at least

user_80867610

If you are using tailwind component in your code then this works

className="focus:ring-0 focus:ring-offset-0"

user_174011960
Related