Twitter Bootstrap Question posted in

Twitter bootstrap – 2 inputs divided by a slash

can someone help me achieve that 2 ínputs look like one divided by a slash
Also doing it with twitter-bootstrap

Idea : http://postimg.org/image/pcgbzj4s1/

What I got so far but there is divided also I think they should overlap(slash with inputs)

<input class="form-control" type="text" name="kerkim" id="input_main">
<i id="slash">/</i>
<div class="input-group">                           
<input id="address" class="form-control" type="text" >
<div class="input-group-btn">
<button type="submit" class="btn btn-ẃarning"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
Tags:

2

Answers


  1. 0

    http://codepen.io/oroborus357/pen/doVKEP Here’s the quick codepen I made for you, it shoud do what you need 🙂

    <span class="first"><input type="text" /></span><input class="second" type="text" />

body {
  padding: 50px;
  background: #333;
}
* {
  box-sizing: border-box;
}
input {
  background: white;
  border: none;
  padding-left: 15px;
}

.first {
  position: relative;
}
.first:before {
  content: "/";
  position: absolute;
  left: 100%;
  top: 0;
  height: 100%;
  transform: translateX(-50%);
  font-size: 18px;
}
    Login or Signup to reply.
  2. 0

    Many ways to it… here’s two.

    Given this html:

      <div class="container">
      <input type="text"> 
      <span class="slash"></span>
      <input type="text">
  </div>

    With this CSS:

    .container{
  border: 1px solid #999;
  display: inline-block;
  border-radius: 3px;
  background: #fff;
  margin-top: 50px;
  position: relative;  
}

.container input{
  border: none;
  background: none;
}

.slash{
  transform: scale(3);
  position: absolute;
}
/* or.... */
.slash{
  width: 2px;
  height: 28px;
  background: #999;
  transform: rotate(20deg);
  position: relative;
  display: inline-block;
  position: absolute;
  top: -5px;
}

    A demo here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search