CSS透明表單是網(wǎng)頁設計中十分常見的元素,它能夠讓網(wǎng)頁看起來更加美觀。當用戶在表單中輸入信息時,輸入的內容將被遮蓋并隱藏,直到用戶點擊提交按鈕后才會發(fā)送。下面是一個簡單的實現(xiàn)透明表單的代碼。
/* HTML */ <form> <label for="username">用戶名:</label> <input type="text" id="username" name="username"> <label for="password">密碼:</label> <input type="password" id="password" name="password"> <input type="submit" value="提交"> </form> /* CSS */ form { background: rgba(255, 255, 255, 0.5); /* 這里的0.5就是透明度的程度,可以根據(jù)需要調整 */ border-radius: 10px; padding: 20px; } label { display: block; margin-bottom: 10px; } input[type="text"], input[type="password"] { width: 100%; border: none; background: transparent; border-bottom: 1px solid #ccc; padding: 5px; margin-bottom: 20px; } input[type="submit"] { display: block; width: 100%; background: #3498db; color: #fff; border: none; padding: 10px; border-radius: 5px; cursor: pointer; }
通過這個代碼,我們能夠實現(xiàn)一個簡單的透明表單,用戶對于輸入框的輸入信息也能夠直觀展示,而整體而言更美觀、實用。
上一篇css透明的邊框
下一篇sass怎么生成css