填充不适用于使用 tachyons css 的输入答案

【问题标题】：padding not applying to input using tachyons css填充不适用于使用 tachyons css 的输入
【发布时间】：2020-04-22 21:19:51
【问题描述】：

我有以下布局：

<article class='pb5 bg-near-white'>
            <header class='tc ph4-ns pt4 pt5-ns'>
                <h1 class='tc blue'>Let's get started posting your question</h1>
            </header>
            <div class=''>
                <div class='pa4 bg-white measure db center f5 f4-ns lh-copy'>
                    <form class='center mt3 mb4 justify-around'>
                        <fieldset class='ba b--transparent'>
                            <div class='mt4'>
                                <label class='db mb2 b'>Title</label>
                                <input
                                    class='noresize ph3 pv3 input-reset ba b--black-10 w-100'
                                    placeholder='title'
                                    onChange={handleTitleChange}
                                ></input>
                            </div>
                            <div class='mv4'>
                                <label class='db mb2 b'>Content</label>
                                <textarea
                                    class='noresize ph3 pv3 input-reset ba b--black-10 w-100'
                                    placeholder='Content Here!'
                                    cols='50'
                                    rows='5'
                                    onChange={handleBodyChange}
                                ></textarea>
                            </div>
                            <a
                                class='tc f6 fw6 b link dim br2 ph3 pv3 mb2 dib white bg-blue w-100'
                                onClick={handlePostQuestion}
                            >
                                Submit
                            </a>
                        </fieldset>
                    </form>
                </div>
            </div>
        </article>

它使用 tachyons 内联 css 来创建基本的表单布局。但是，我最终得到以下 ui：

填充似乎不适用于标题input 字段，但它确实适用于textarea 字段。当我将input 标记更改为textarea 标记时，填充适用，但问题是这似乎是一个临时修复。我做错了吗？

【问题讨论】：

尝试将 !important 添加到输入文本填充的 css 中，然后按 Ctrl + R 硬刷新浏览器，以便从头开始重新加载。

标签： css reactjs tachyons-css

【解决方案1】：

在输入元素上，添加 border-box 类或设置 type="text" 将使其行为符合您的预期。

原因是，Tachyons 不会为所有输入元素提供“边界框”框大小；更详细地解释in the docs。在source code 中也可见。

【讨论】：