JSDM

HTML

14
1
<div class="container">
2
  
3
  <form action="" class="search">
4
  
5
    <div class="field">
6
7
      <input type="text" class="input-search" id="input-search" name="input-search" pattern=".{1,}" required>
8
      <label for="input-search">Search</label>
9
10
    </div> <!-- /field -->
11
12
  </form>
13
  
14
</div>
!

CSS

xxxxxxxxxx
82
 
1
$font-family: sans-serif;
2
$font-size: 1em;
3
$font-weight: 400;
4
5
$line-height: 1.5em;
6
7
$color: #282828;
8
$color-bg: #d8d6d8;
9
$color-border: #dfdfdf;
10
11
$color-placeholder: #b2b2b2;
12
13
* {
14
  box-sizing: border-box;
15
}
16
17
html, body {
18
  height: 100%;
19
}
20
21
body {
22
  background-color: $color-bg;
23
  color: $color;
24
  font: $font-weight #{$font-size}/#{$line-height} $font-family;
25
  margin: 0;
26
}
27
28
.container {
29
  left: 50%;
30
  position: fixed;
31
  top: 50%;
32
  transform: translate(-50%, -50%);
33
}
34
35
.search {
36
  width: 24em;
37
  
38
  .field {
39
    position: relative;
40
  }
41
  
42
  label {
43
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAQAAAC1QeVaAAAAxElEQVR4AXXPIUuDcRDA4Zv4AUSwTLEKVoNlySyCYLO98CCsahGrX0AW/QhmBRHEJghLS4JFBBXDgrJi2In78w8v4v3S8XDh4nd0DTxLEzd2RC2EnrH07trQVDrXqbhs7FvfnBDWDKWTigOpL2oWvZpYKPjio1zVHEt7BdOtaLUtHRX8MmqjRjooeCVttPBOWi+4JT1aLaDjVLpU/5ytn840Dj1IaWSpYmi8yVlTF54qh9K8nn27usJK5fC3yvfhPx7a/AE9dYwDEfKrlAAAAABJRU5ErkJggg==) no-repeat 0 50%;
44
    color: $color-placeholder;
45
    left: 50%;
46
    position: absolute;
47
    transform: translate(-50%, -50%);
48
    top: 50%;
49
    transition: left .4s, transform .4s;
50
    padding-left: 1.25em;
51
  }
52
  
53
  .input-search {
54
    border: 1px solid $color-border;
55
    border-radius: .25em;
56
    box-shadow: 0 1px 0 #bfbebf;
57
    display: block;
58
    font: $font-weight #{$font-size}/#{$line-height} $font-family;
59
    padding: .5em 1.75em;
60
    width: 100%;
61
    
62
    &:focus,
63
    &:valid {
64
      
65
      &+ label {
66
        left: .5em;
67
        transform: translate(0, -50%);
68
      }
69
      
70
    }
71
    
72
    &:valid {
73
      
74
      &+ label {
75
        text-indent: -9999px;
76
      }
77
      
78
    }
79
    
80
  }
81
  
82
}
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

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

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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