0
私はこれを多くの場所で見てきました。 スクロールが値を変更します。 カスタムHTMLフォームの入力値を変更する
方法のhtmlでこれを作成し、これは何と呼ばれていますか？
編集： 人々はそのドロップダウンを考えているが、右と左の値にその矢印の動きが変更されます。ここでは、スライダー
を使用して
A
答えて
1
更新例は一例です。
var steps = [
"one",
"two",
"three",
"four",
"five"
];
$(function() {
$(".slider").slider({
value: 0,
min: 0,
max: 4,
step: 1,
slide: function(event, ui) {
$(".b").html(steps[ui.value]);
}
});
$(".b").val(steps[$(".slider").slider("value")]);
});@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
html,body{
font-family: 'Open Sans', sans-serif;
background-color: #fff;
text-align: center;
color: #212121;
}
h1{
text-transform: capitalize;
font-weight: 100;
font-size: 42px;
border-bottom: 1px dashed #ccc;
padding-bottom: 30px;
color: #454545;
}
.container{
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
background-color: #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
background: none;
}
.ui-slider-horizontal .ui-slider-handle{
top: -.5em;
}
.ui-slider-horizontal{
height: .4em;
border: 0;
background-color: #e8e8e8;
}
.b{
margin-top:20px;
font-weight: 100;
text-align: center;
display: inline-block;
background-color: #00CEAF;
color: #fff;
padding: 30px;
border-radius: 3px;
min-width: 200px;
transition: all .3s;
font-size: 20px;
&:hover{
background-color: darken(#00CEAF,5%);
}
}
height: 1.2em;
width: 1.2em;
background-color: #00CEAF ;
&:hover,&:focus,&:active{
background-color: #00CEAF;
}
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{border-color: #a3a3a3;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #a3a3a3;
outline: 0;
&:hover,&:focus,&:active{
outline: 0;
background-color: #00CEAF;
border-color: #00CEAF;
}
&:hover{
background-color: #fff;
&:active{
background-color: #00CEAF;
}
}
}<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="container">
<h1>Current value is : </h1>
<div class="b">one</div>
<div class="slider"></div>
0
あなたはHTMLでこれを行うことはできません。
あなたはオプションのためのフォームを使用したい場合は、このような何か行うことができますHTMLを選択します：あなたはCSSを使用することができます好きな色や形でフォームを設計するに
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
を。 ドロップダウン・プラグインを使用することもできます。
関連する問題
- 1. HTMLフォーム入力にフォーカスを変更
- 2. 入力値の変更anglejs/html
- 3. CSSフォントの色を変更するためのHTMLフォーム入力
- 4. JavaScriptでHTMLフォームの入力を変更する
- 5. カスタム入力フォーム（Sharepoint）
- 6. フォームの入力値をJqueryで変更する
- 7. ブートストラップモーダル内でフォーム入力フィールドの値をjqueryに変更する
- 8. 変更された入力を検出するHTML入力テーブルの値
- 9. フォーム入力を変更するラジオボタン
- 10. HTMLフォーム入力
- 11. HTMLフォーム入力
- 12. HTMLフォーム複数の同じ値入力
- 13. HTMLとCSS - 入力ボタンのテキスト値を変更する
- 14. HTMLカスタム入力イメージタグ？
- 15. カスタム入力 - Reduxのフォーム
- 16. htmlページをエコーし、PHP変数からフォームに値を入力
- 17. HTMLフォーム入力タイトルスタイリング
- 18. 入力フィールドの変更フォームを送信
- 19. 値を変更せずに入力値を変更するJavaScript
- 20. HTML入力値を変更し、jQueryでHTML文字列を取得する
- 21. 変更選択値のHTMLフォーム（Awesomium VB.net）
- 22. onclick div入力値を変更する
- 23. HTMLフォームの自動入力
- 24. HTMLフォームの入力をjquery変数に保存する問題
- 25. Html：フォームからの入力の価値を得るには？
- 26. 入力可能なPDFを入力可能なHTMLフォームに変換する
- 27. html入力の行のスマートサイズ変更
- 28. HTML入力値
- 29. 変更入力値とプレースホルダ
- 30. Html select onchange他の入力値にカスタム属性値を設定する
スクロールリスナーを使用するカスタムドロップダウンです。 js/jQueryを使用してください。 – Justinas
「
という名前はどのように作成するのですか？ – Phoenix