JSDM

HTML

 
1
<form action="#" id="js-form">
2
  <div class="name">
3
    <input type="text" name="name" placeholder="Adam" />
4
    <input type="text" name="surname" placeholder="Smith" />
5
    <input type="mail" name="email" placeholder="adam.smith@mail.com"/>
6
  </div>
7
  <div class="radio">
8
    <label for="radio-choice-1">Choice 1</label>
9
    <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" />
10
    <label for="radio-choice-2">Choice 2</label>
11
    <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
12
  </div>
13
  <div class="dropdown">
14
    <label for="select-choice">Select Dropdown Choice:</label>
15
    <select name="select-choice" id="select-choice">
16
      <option value="Choice 1">Choice 1</option>
17
      <option value="Choice 2">Choice 2</option>
18
      <option value="Choice 3">Choice 3</option>
19
    </select>
20
  </div>
21
  <div class="message">
22
    <label for="textarea">Textarea:</label>
23
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
24
  </div>
25
  <div class="check">
26
    <label for="checkbox">Checkbox:</label>
27
    <input type="checkbox" name="checkbox" id="checkbox" />
28
  </div>
29
  <div class="submit">
30
    <input type="submit" value="Submit" disabled/>
31
  </div>
32
</form>
!

CSS

​x
 
1
// Variables
2
$radius: 4px;
3
​
4
/*Typography*/
5
html {font: 16px 'Open sans', sans-serif;}
6
form label {font-size: .9em;}
7
​
8
/* Base */
9
* {
10
  box-sizing: border-box;
11
}
12
html,
13
body {
14
  margin: 0;
15
  padding: 0;
16
  width: 100%;
17
  height: 100%;
18
}
19
/* Form */
20
form {
21
  margin: 2% auto;
22
  padding: 1em;
23
  width: 320px;
24
  color: #aaa;
25
  border: .1em solid #ddd;
26
  border-radius: $radius;
27
}
28
.name {width: 100%;}
29
.name input,
30
.submit input,
31
select,
32
textarea {
33
  width: 47%;
34
  height: 3em;
35
  text-indent: .5em;
36
  border: .1em solid #ddd;
37
  border-radius: $radius;
38
  outline-color: #1abc9c;
39
}
40
.name input[name="surname"] {float: right;}
41
.name input[type="mail"] {
42
  margin-top: 1em;
43
  width: 100%;
44
}
45
.radio,
46
.dropdown,
47
.message,
48
.check,
49
.submit {margin-top: 1em;}
50
.dropdown select,
51
.message textarea,
52
.submit input {width: 100%;}
53
.dropdown select {color: #aaa;}
54
.message textarea {height: 8em;}
55
.radio input,
56
.check input {position: relative;top: 1px;}
57
.radio input:before,
58
.check input:before {
59
  content: "";
60
  position: absolute;
61
  top: 0;
62
  left: 0;
63
  width: 1em;
64
  height: 1em;
65
  background: #e9e9e9;
66
  border-radius: $radius;
67
  transition: all .35s ease;
68
}
69
.radio input:before {
70
  border-radius: 50%;
71
}
72
.radio input:checked:before {
73
  top: -.1em;
74
  left: -.1em;
75
  width: .5em;
76
  height: .5em;
77
  border: .35em solid #e9e9e9;
78
  background: #1abc9c;
79
}
80
.check input:checked:before {
81
  content: "\f00c";
82
  font-family: 'fontAwesome';
83
  color: #1abc9c;
84
}
85
.check input:before {left:-.1px;}
86
.submit input {
87
  //display: block;
88
  //margin: auto;
89
  //width: 99.5%;
90
  background: #1abc9c;
91
  color: #fff;
92
  border: 0;
93
  border-bottom: $radius solid darken(#1abc9c, 7%);
94
  font-size: 1em;
95
  font-weight: bold;
96
  &:focus,
97
  &:hover {
98
    background: #16a085;
99
    border-bottom-color: darken(#16a085, 7%);
100
  }
101
  &:active {
102
    background: #1bc2a2;
103
    border-bottom-color: darken(#1bc2a2, 7%);
104
  }
105
}
!
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
1
 
1
​
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................