矢印の終わりに矢印または三角形を付ける

Question

入力フォームの端に矢印（または三角形）が表示されるように、この線の外観を再現しようとしています。私はこのような入力フィールドの周りに線を有する限り得ている

：この画像はHTML5に変換されている古いフラッシュアプ​​リからである

HTML

<form action=""> 
    <div class="line"> 
     <label>Cab Width = 
      <input type="number" id="cabWidth" name="cabWidth" min="30" max="57.5" step="0.125" value="32" autofocus> (decimal inches) 
     </label> 
    </div> 
</form> 

CSS

.line { 
    display: flex; 
    flex: 1; 
    width: 100%; 
    margin: 20px auto; 
    line-height: 1em; 
} 
.line:before, .line:after { 
    content: ''; 
    flex-grow: 1; 
    margin: 0px 4px; 
    background: linear-gradient(black, black); 
    background-size: 100% 2px; 
    background-position: 0% 50%; 
    background-repeat: repeat-x; 
} 

しかし、私はどのようにこの種のCSSの三角形や矢印の最後に追加するか分かりません。多分それはできないかもしれません。

私はこれをどのように解決するかについてのアイディアや指導を感謝します。

Answer 1

あなたはあなたのソリューションに非常に近いところでした。唯一の問題は使用できませんでした。後：矢印の後に追加します。次の解決策を参照してください:)

私は異なるアプローチをとり、2つの明確な行間を作成しました。これらの行のそれぞれについて、私は以下を使用しました：最後に矢印を追加する。

.line-container { 
 
    display: flex; 
 
    width: 100%; 
 
    margin: 20px auto; 
 
    align-items: center; 
 
} 
 

 
.line { 
 
    flex-grow: 1; 
 
    height: 1px; 
 
    background: black; 
 
    position: relative; 
 
} 
 

 
.line.arrow-right:after { 
 
    position: absolute; 
 
    content: ''; 
 
    bottom: -10px; 
 
    right: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 10px solid transparent; 
 
    border-bottom: 10px solid transparent; 
 
    border-left: 10px solid black; 
 
} 
 

 
.line.arrow-left:after { 
 
    position: absolute; 
 
    content: ''; 
 
    top: -10px; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 10px solid transparent; 
 
    border-bottom: 10px solid transparent; 
 
    border-right: 10px solid black; 
 
} 
 

 
label { 
 
    margin: 0 15px; 
 
}

<form action=""> 
 
    <div class="line-container"> 
 
    <span class="line arrow-left"></span> 
 
    <label>Cab Width = 
 
     <input type="number" id="cabWidth" name="cabWidth" min="30" max="57.5" step="0.125" value="32" autofocus> (decimal inches) 
 
    </label> 
 
    <span class="line arrow-right"></span> 
 
    </div> 
 
</form>

Answer 2

ブートストラップを使用している場合は、無料でグリフコンのサブセットを取得し、多くの矢印クラスが含まれます。

あなたはJavaScriptコンポーネントを必要としない場合は、あなただけの上記bootstrap.min.cssリンクにリンクすることができます彼らのCDN（コンテンツ配信ネットワーク）

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

からブートストラップにリンクすることができ

http://getbootstrap.com/components/ 

オプションのテーマとJavaScriptをスキップしてください。

そして、クラスを空のスパンに適用して、グリフコンを表示します。サイト上に適切なクラス名が表示されます。

<span class="glyphicon glyphicon-chevron-left"></span> 
<span class="glyphicon glyphicon-chevron-right"></span> 

あなたは既存の要素にCSSを経由してこれらを追加することができます。構文の後に、ちょうどだけのために、たとえば、ブートストラップCSSファイルに掘るし、使用するアイコンの適切なコードを見つける必要があります上記：

glyphiconシェブロン右

:after { 
    font-family: 'Glyphicons Halflings'; 
    content: "\e080"; 
} 

glyphiconシェブロン左

:after { 
    font-family: 'Glyphicons Halflings'; 
    content: "\ e079"; 
}