如何添加带有粗线角的输入搜索域？

时间：2017-12-18 作者：Vanina Yordanova

我正在尝试在标题中添加搜索字段：

      <form class="searchform">
      <span><input type="text" class="search rounded" p 
      laceholder="Search..."></span>    
     </form>

e.searchform{
width:1000px;
margin:0 auto;
height: 50px;
}
.search { 
padding:6px 15px 6px 30px;
margin:3px; 
background: url(\'./images/search.png\') no-repeat 8px 6px; 
 }

.rounded { 
border-radius:55px; 
-moz-border-radius:15px; 
-webkit-border-radius:15px; 
 }

 input[type=text]{
 color:#bcbcbc;
  }  

  .lighter, .light, .dark {
   width:95%;
  height:50px;
  padding:40px 25px;
  }

 .lighter{
 background: url(\'./images/lighter_grey.jpg\');
   }
.lighter input[type=text]{
border:1px solid #d0d0d0;
background-color:#fcfcfc;
}
.light{
background: url(\'./images/light_grey.jpg\');
}
.light input[type=text]{
border:1px solid #acb1b7;
background-color:#fcfcfc;
 }
input[type=button], input[type=button]:hover {
position:relative; 
left:-6px;
border:1px solid #adc5cf;
background: #e4f1f9; /* Old browsers */
background: -moz-linear-gradient(top, #e4f1f9 0%, #d5e7f3 100%); /* FF3.6+ 
*/
background: -webkit-gradient(linear, left top, left bottom, color-
 stop(0%,#e4f1f9), color-stop(100%,#d5e7f3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* 
  Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* IE10+ */
background: linear-gradient(top, #e4f1f9 0%,#d5e7f3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#e4f1f9\', endColorstr=\'#d5e7f3\',GradientType=0 ); /* IE6-9 */
color:#7da2aa;
cursor: pointer;
}

出于某种原因，css样式对表单的影响不大。例如，表单没有获得所需的宽度。可能有什么问题。

1 个回复
最合适的回答,由SO网友:Kieran McClung 整理而成

您的标记在技术上是正确的，除了第一行css. 您需要删除e 在.searchform 声明接受这些样式。

下面的代码工作正常（请参阅此处的演示：https://codepen.io/raptorkraine/pen/eyJrJG) 然而，如果您的输入仍然没有显示圆角边框，则可能是您的样式被另一个样式表覆盖了。

您可以通过在冲突的样式表之后声明样式表、添加更具体的声明或添加!important （不推荐）。

HTML

<form class="searchform">
    <span>
        <input type="text" class="search rounded" placeholder="Search...">
    </span>    
</form>

CSS

/* Removed the \'e\' from this line */
.searchform {
    width: 1000px;
    margin: 0 auto;
    height: 50px;
}

.rounded {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 55px;
}

/* More specific styles (if the above doesn\'t work) */
form.searchform {
    width: 1000px;
    margin: 0 auto;
    height: 50px;
}

form.searchform input.rounded {
    border-radius: 15px;
}

/* Demo styles to better view border radius */
.searchform {
    background-color: #ccc;
}

.rounded {
    border: 1px solid #000;
}
还值得注意的是border-radius 不需要，并且值与基本样式不同。如果你坚持使用它们，那么值得将它们全部改为15px 或55px.

Additional

如果你想使用.light, .lighter &；.dark 类我还要更改以下代码：

HTML

<input type="text" class="search rounded light" placeholder="Search...">

CSS

/* Replaces: .lighter input[type=text] */
input.lighter {
    border: 1px solid #d0d0d0;
    background-color: #fcfcfc;
}

/* Replaces: .light input[type=text] */
input.light {
    border: 1px solid #acb1b7;
    background-color: #fcfcfc;
}

结束
标签： css   search   html   input   小码农  

相关推荐

将自定义CSS添加到指定类别中的WooCommerce产品页

我花了几个小时研究如何做到这一点，但我发现的每件事都以一种我无法理解的方式解释了这一点。我不擅长编码，但我知道如何检查元素并从中进行工作，但在这种情况下这对我没有帮助。我想对指定类别的产品使用不同的页面布局/模板。我正在使用WooCommerce 我能够使用inspect元素以我想要的方式重新创建产品页面。然后我将文本复制到自定义css中，效果很好。然而，这最终是一个全球性的变化。我的大多数产品页面都会受益于使用默认模板，而不是使用自定义模板。我想知道如何在括号内添加代码，以便我添加的自定义css（自定义