Question

所以我有一个小输入框，我只想接受数字，我看起来很好但是当我点击它时，框会画出另一个框+上下箭头。想摆脱两者。另外，我如何在第一张图片中添加一个小图标来乞讨它。

我在框中点击+添加小搜索图标

时想要这个

但我明白了：

HTML：

<div class="GeolocationInput  os-animation" data-os-animation="zoomInUp" data-os-animation-delay="1.5s">
    <div style="width: 100%;">
        <form class="GeolocationInput-form ">
            <div>
                <input type="number"  class="GeolocationInput-input" placeholder="Escribe tu Codigo Postal..." >
            </div>
            <div>
                <button class="GeolocationInput-button" disabled="">Continuar</button>
            </div>
        </form>
    </div>
</div>

CSS：

.GeolocationInput {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

.GeolocationInput .GeolocationInput-form {
    width: 274px;
    margin: 10px auto 0;
}
.GeolocationInput .GeolocationInput-input {
    width: 274px;
}

.GeolocationInput-input {
    box-sizing: border-box;
    width: 90%;
    border: 1px solid #aebcce;
    border-radius: 100px;
    padding: 15px 40px 10px 42px;
    margin: 0 0 15px;
    font-size: 16px;
    font-family: proxima-nova,Helvetica Neue,Helvetica,Avenir,Lucida Grande,Arial,sans-serif;
    font-weight: 300;
}


.GeolocationInput-button {
    background: #635bd4;
    max-width: 275px;
    width: 90%;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    padding: 16px 32px;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 100px;
    border: none;
    font-family: proxima-nova,Helvetica Neue,Helvetica,Avenir,Lucida Grande,Arial,sans-serif;
    font-weight: 500;
    text-align: center;
}

http://jsfiddle.net/zhpmahnq/192/

Answer 1

您可以使用以下选项删除边框：

.GeolocationInput-input:focus {
    outline: none;
}

箭头有点难以删除，您需要针对不同浏览器使用不同的规则。

对于Webkit浏览器（如Chrome），您需要：

.GeolocationInput-input::-webkit-outer-spin-button,
.GeolocationInput-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

对于Firefox，您需要：

.GeolocationInput-input {
    -moz-appearance: textfield;
}

所有这些都已添加到以下示例中：

.GeolocationInput {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	-webkit-font-smoothing: antialiased;
}

.GeolocationInput .GeolocationInput-form {
	width: 274px;
	margin: 10px auto 0;
}
.GeolocationInput .GeolocationInput-input {
	width: 274px;
}

.GeolocationInput-input {
	box-sizing: border-box;
	width: 90%;
	border: 1px solid #aebcce;
	border-radius: 100px;
	padding: 15px 40px 10px 42px;
	margin: 0 0 15px;
	font-size: 16px;
	font-family: proxima-nova,Helvetica Neue,Helvetica,Avenir,Lucida Grande,Arial,sans-serif;
	font-weight: 300;
  -moz-appearance: textfield;
}

.GeolocationInput-input:focus {
    outline: none;
}

.GeolocationInput-input::-webkit-outer-spin-button,
.GeolocationInput-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.GeolocationInput-input::-webkit-outer-spin-button,
.GeolocationInput-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.GeolocationInput-button {
	background: #635bd4;
	max-width: 275px;
	width: 90%;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	padding: 16px 32px;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 100px;
	border: none;
	font-family: proxima-nova,Helvetica Neue,Helvetica,Avenir,Lucida Grande,Arial,sans-serif;
	font-weight: 500;
	text-align: center;
}

        <div class="GeolocationInput  os-animation" data-os-animation="zoomInUp" data-os-animation-delay="1.5s">
            <div style="width: 100%;">
                <form class="GeolocationInput-form ">
                    <div>
                        <input type="number"  class="GeolocationInput-input" placeholder="Escribe tu Codigo Postal..." >
                    </div>
                    <div>
                        <button class="GeolocationInput-button" disabled="">Continuar</button>
                    </div>
                </form>
            </div>
        </div>

希望这有帮助！：）

Answer 2

默认情况下，数字类型的输入具有箭头。你可以尝试一些CSS来隐藏它。试试这个：

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

Answer 3

默认情况下，数字类型的

<input type="number" >输入具有箭头。

以下是隐藏箭头的方法：

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}

<input type="number" />

无法找到纠正输入文本框的方法

3 个答案: