删除输入框的初始样式

Question

尝试更改输入文本框初始样式时，我遇到了一些问题 这就是我现在的风格：

.myInput {
    text-align: left;
    display:inline-block;
    outline: none;
    float: left;
    font-size: 0.8em;
}

我想删除边框并使输入文本出现在输入控件的开头，而没有任何由默认输入文本框样式创建的填充/边距 （我添加了一个显示输入文本位置与标签文本位置的图像）

谢谢：）

Answer 1

如果要更改/更改文本框的默认样式（myInput） 试试这个。

.myInput{
border:0px!important;
text-align:left!important;
padding:0px!Important;
margin:0px!important;
}

使用!important会优先考虑您的风格 希望它会有所帮助 谢谢 ..

Answer 2

使用border:none删除边框并添加自定义样式

<强> DEMO

Answer 3

我认为在代码中声明这么多!important并不是一个好主意。你最终会遇到几个错误，因为!important不仅仅是优先顺序 - 它会积极地覆盖。

最好将.myInput更改为ID（#myInput）并定位ID。 ID被赋予更高的优先级。

#myInput {
  padding: 0px;
  margin: 0px;
  text-align:left;
  border: 0px;
  ...your styles here...
}

如果您多次使用此输入，您可以尝试将其包装为ID下的类并将其定位（#myInput input）我也对在CSS中定位ID感到担心，但如果它是在ID和!important之间进行选择，我会急着找ID。

!important命令是一个可爱的黑客，但你会遇到太多问题，因为过度使用它。经验法则（我并不是互联网上唯一支持此问题的CSS爱好者）：除非绝对必要，否则不要使用!important。