在CSS中设置TextBox样式的最佳方式

我想听听用纯 CSS 做的最好的事情是什么。

我想听听用纯 CSS 做的最好的事情是什么。

现状:

我有一个文本框,我可以在其中搜索特定的项目。但现在我也有一个几乎相同的文本框的高级搜索,但 advancedSearchTextbox 的宽度小于默认的。

我的问题

样式文本框的最佳方式是什么?

我的解决方案

我现在已经修复了这样的:

.defaultTextBox {
    padding: 0;
    height: 30px;
    position: relative;
    left: 0;
    outline: none;
    border: 1px solid #cdcdcd;
    border-color: rgba(0,0,0,.15);
    background-color: white;
    font-size: 16px;
}
.advancedSearchTextbox {
    width: 526px;
    margin-right: -4px;
}

然后在 HTML 中,它看起来像这样的 advancedSearchTextbox:

<input type="text" class="defaultTextBox advancedSearchTextBox" />

这是最好的方法吗?或者有任何其他选项可用?至于只有 1 个其他文本框可以做,但是如果我需要其他页面上的更多文本框呢?

提前感谢:)!

18

您可以使用input[type=text]定位所有文本框,然后为需要它的文本框明确定义类。

您可以像的代码:

input[type=text] {
  padding: 0;
  height: 30px;
  position: relative;
  left: 0;
  outline: none;
  border: 1px solid #cdcdcd;
  border-color: rgba(0, 0, 0, .15);
  background-color: white;
  font-size: 16px;
}
.advancedSearchTextbox {
  width: 526px;
  margin-right: -4px;
}
<input type="text" class="advancedSearchTextBox" />
2

您可以使用:

input[type=text]
{
 /*Styles*/
}

在其中定义您的常见样式属性。对于额外的样式,您可以添加一个类。

2

你的方法很好...

.myclass {
    height: 20px;
    position: relative;
    border: 2px solid #cdcdcd;
    border-color: rgba(0, 0, 0, .14);
    background-color: AliceBlue;
    font-size: 14px;
}
<input type="text" class="myclass" />
2

您还想在空输入框中放置一些文本(占位符)

.myClass {
   ::-webkit-input-placeholder {
    color: #f00;
  }
   ::-moz-placeholder {
    color: #f00;
  }
  /* firefox 19+ */
   :-ms-input-placeholder {
    color: #f00;
  }
  /* ie */
  input:-moz-placeholder {
    color: #f00;
  }
}
<input type="text" class="myClass" id="fname" placeholder="Enter First Name Here!">

用户了解要键入的内容。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(695)
C#从XE获取当前汇率
上一篇
我想在一个传输上使用多个服务(节俭)(two one thrift)
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(33条)