#212121
1.input-container { 2 position: relative; 3 display: flex; 4 width: 100%; 5 max-width: 290px; 6} 7 8.input-container > span, 9.input-container .input { 10 white-space: nowrap; 11 display: block; 12} 13 14.input-container > span, 15.input-container .input:first-child { 16 border-radius: 6px 0 0 6px; 17} 18 19.input-container > span, 20.input-container .input { 21 border-radius: 0 6px 6px 0; 22} 23 24.input-container > span, 25.input-container .input { 26 margin-left: -1px; 27} 28 29.input-container .input { 30 position: relative; 31 z-index: 1; 32 flex: 1 1 auto; 33 width: 1%; 34 margin-top: 0; 35 margin-bottom: 0; 36} 37 38.input-container span { 39 text-align: center; 40 padding: 8px 12px; 41 font-size: 14px; 42 line-height: 25px; 43 color: #6b7385; 44 background: #d4def5; 45 border: 1px solid #CDD9ED; 46 font-weight: bold; 47 transition: background 0.3s ease, border 0.3s ease, color 0.3s ease; 48} 49 50.input-container:focus-within > span { 51 color: #fff; 52 background-color: #148cd1; 53 border-color: #148cd1; 54} 55 56.input { 57 display: block; 58 width: 100%; 59 padding: 8px 16px; 60 line-height: 25px; 61 font-size: 14px; 62 font-weight: 500; 63 font-family: inherit; 64 border-radius: 6px; 65 -webkit-appearance: none; 66 color: #99A3BA; 67 border: 1px solid #CDD9ED; 68 background: #fff; 69 transition: border 0.3s ease; 70} 71 72.input::placeholder { 73 color: #CBD1DC; 74} 75 76.input:focus { 77 outline: none; 78 border-color: #148cd1; 79}
1.5K views
1.5K views
Comments
MIT License