Question

我想在提交表单的按钮中放置一个CSS Shape，我在开始时失败了，因为我试图以某种方式将css形状放在<input type="submit">内但我不得不使用html标签<button>相反......这是我的解决方案，并在搜索按钮中添加了一个很好的纯CSS搜索图标。可能需要稍微调整一下

＆＃13;

#search-icon {
  font-size: 4em;
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border: 0.1em solid #B10B14;
  position: relative;
  border-radius: 0.35em;
}
#search-icon::before {
  content: "";
  display: inline-block;
  position: absolute;
  right: -0.25em;
  bottom: -0.1em;
  border-width: 0;
  background: #B10B14;
  width: 0.35em;
  height: 0.08em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

＆＃13;

<form role="search" method="get" id="searchform" action="<?php bloginfo('url'); ?>">
  <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="search-field" />
  <button type="submit" id="search-icon-container">
    <div id="search-icon"></div>
  </button>
</form>

＆＃13;

Answer 1

您是否认为您也可以使用字体真棒？

https://stackoverflow.com/tags/font-awesome/info

button i {
  color:red;/*set the color */
  font-size:2em;./* set the size */
  }
/* even add some text decoration */
i:before {
  text-shadow:1px 1px 1px black;
  }

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet"/>
<button type="submit"><i class="fa fa-search"></i></button>

将css形状放在提交表单的按钮内

1 个答案: