Question

我有一个类似的搜索框

代码

<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
    <Border BorderBrush="Transparent"
            BorderThickness="0"
            Padding="3">
        <Button x:Name="MaxWidthButton"
                Content="{Binding Path=PreviousButtonText, FallbackValue=VeryLongTextThatIKnowItsLength}" />
    </Border>
    <Border BorderBrush="Transparent"
            BorderThickness="0"
            Padding="3,3,8,3">
        <Button Width="{Binding ElementName=MaxWidthButton, Path=ActualWidth}" Content="{Binding Path=NextButtonText}" />
    </Border>
    <Border BorderBrush="Transparent"
            BorderThickness="0"
            Padding="3,3,8,3">
        <Button Width="{Binding ElementName=MaxWidthButton, Path=ActualWidth}" Content="{Binding Path=FinishButtonText}" />
    </Border>
    <Border BorderBrush="Transparent"
            BorderThickness="0"
            Padding="8,3,3,3">
        <Button Width="{Binding ElementName=MaxWidthButton, Path=ActualWidth}" Content="{Binding Path=CancelButtonText}" />
    </Border>
</StackPanel>

此处搜索框为100％。

我想自定义搜索框和搜索按钮大小80％和20％

实际上我想让我的搜索框像那样

任何Idia？

Answer 1

纯CSS。

＆＃13;

#search-form .form-control,
#search-form .form-control:focus,
#search-form .form-control:hover {
  height: 50px;
  border-right: none;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  outline: none;
  box-shadow: none;
  left: 20px;
  margin-top: -1px;
}
/**/

#search-form button.btn.btn-orange,
#search-form button.btn.btn-orange:hover,
#search-form button.btn.btn-orange:focus {
  position: relative;
  height: 50px;
  width: 175px;
  color: white;
  background: none;
  font-size: 20px;
  text-align: left;
  margin-left: 15px;
  outline: none;
  box-shadow: none;
  border: none;
}
#search-form button.btn.btn-orange:before,
#search-form button.btn.btn-orange:after {
  position: absolute;
  content: '';
  top: -1px;
  height: 50px;
  width: 55%;
  background: #DC521F;
  z-index: -1;
}
#search-form button.btn.btn-orange:before {
  left: -15px;
  border-radius: 0;
  border-right: none;
  transform: skew(20deg);
  transform-origin: top left;
}
#search-form button.btn.btn-orange:after {
  right: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-left: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<form id="search-form">
  <div class="container">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
                <button class="btn btn-orange" type="button">
                    <span class="glyphicon glyphicon-search">
                    </span>

      </button>
      </span>
    </div>
  </div>
</form>
<hr>

＆＃13;

Answer 2

我让你成了小提琴。你可能需要调整一些东西，但你有了想法，对吗？

我的建议。开始学习CSS。我现在帮助你了。但没有人会为你做你的工作。

小提琴link。

代码：

<强> HTML

＆＃13;

<div class="input-group">
     <input name="search" value="" class="form-control" placeholder="Search" type="text" >
     <span class="input-group-btn">
        <button class="btn btn-default" type="submit"></button>
     </span>
</div>

＆＃13;

<强> CSS

＆＃13;

.input-group-btn img{
    width: 16px;
}
.form-control{
    padding: 20px;
    border-radius:20px;
}
.btn{
    background: url('http://s17.postimg.org/m8q2d6r9n/o_P5_Lw.png') no-repeat;
    height: 42px;
    width: 115px;
    border: none;
}

＆＃13;

Answer 3

您也可以使用纯CSS方法实现此目的。

您的HTML：

<div class="input-group">
     <input name="search" value="" class="form-control" placeholder="Search" type="text" >
     <span class="input-group-btn">
       <span id="triangle-down"></span> <!-- <<<<< ADD THIS TO YOUR HTML -->
        <button class="btn btn-default" type="submit"><span class="icon-search"></span></button>
     </span>
</div>

在你的CSS中你可以这样做：

.input-group{
  width:60%;
  margin:20px;
}
.form-control{
  border-radius:20px;
  width:80%;
}
.input-group-btn{
  width:20%;
}
.btn-default{
  border-radius:20px;
  background-color:#DC521F;
  color:#fff;
  width:100%;
  position:relative;
  z-index:0;
}
#triangle-down {
    width: 0;
    height: 0;
  display:inline-block;
  position:absolute;
  left:-20px;
  top:1px;
  z-index:100;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 32px solid #DC521F;
}

这里的工作演示：CODEPEN

<强> ------- ------- UPDATE

如果将其添加到CSS：

.hover{
  border-top: 32px solid #E6E6E6 !important;
}

并将其用作JS代码：

$( ".input-group-btn" ).hover(
  function() {
    $( '.triangle-down').addClass( "hover" );
  }, function() {
    $( '.triangle-down' ).removeClass( "hover" );
  }
);

然后HOVER会像你想要的那样工作。

这里的工作演示：CODEPEN

在bootstrap 3中自定义输入组内的输入框和按钮宽度

3 个答案: