Question

我想使用tailwindcss创建一个在输入字段内带有按钮的搜索框。这是为此搜索框创建的设计图像。搜索框图片https://ibb.co/x1FLkSq

Answer 1

这是我创建的代码。

`<div class="hero bg-gredient-dark h-400px flex flex-col px-2">
    <div class="search-box mx-auto my-auto w-full sm:w-full md:w-full lg:w-3/4 xl:w-3/4">
        <form class="flex flex-row">
            <span
                class="flex items-center bg-gray-100 rounded rounded-r-none border-0 px-3 font-bold text-grey-100">?</span>
            <input
                class="h-16 bg-gray-100 text-grey-darker py-2 font-normal text-grey-darkest border border-gray-100 font-bold w-full py-1 px-2 outline-none text-lg text-gray-600"
                type="text" placeholder="What do you want to learn?">
            <span
                class="flex items-center bg-gray-100 rounded rounded-l-none border-0 px-3 font-bold text-grey-100">
                <button
                    class="bg-gredient-dark hover:bg-gredient-light text-lg text-white font-bold py-3 px-6 rounded">Search</button>
            </span>
        </form>
    </div>
</div>

下面是我用来创建它的css

.bg-gredient-dark{
background: rgb(18, 127, 191);
background: -moz-linear-gradient(130deg, rgba(18, 127, 191, 1) 0%, rgba(3, 83, 136, 1) 100%);
background: -webkit-linear-gradient(130deg, rgba(18, 127, 191, 1) 0%, rgba(3, 83, 136, 1) 100%);
background: linear-gradient(130deg, rgba(18, 127, 191, 1) 0%, rgba(3, 83, 136, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#127fbf", endColorstr="#035388", GradientType=1);}

.h-400px {
height: 25rem;}

如何在tailwindcss的输入字段内创建提交按钮

1 个答案: