技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

好看的表單input輸入框focus聚焦樣式

作者:admin    時(shí)間:2022-12-7 13:40:14    瀏覽:

網(wǎng)頁(yè)設(shè)計(jì)中表單非常常見(jiàn)常用，一個(gè)好的表單樣式能讓更多訪客產(chǎn)生好感，所以表單UI設(shè)計(jì)尤為重要。本文介紹一個(gè)好看的表單input輸入框focus聚焦樣式。

 好看的表單input輸入框focus聚焦樣式

demodownload

如上圖看到，當(dāng)鼠標(biāo)點(diǎn)擊表單input輸入框時(shí)，輸入框會(huì)通過(guò)亮色凸顯起來(lái)，而整個(gè)表單form盒子也有一個(gè)陰影shadow顯示效果。這種交互效果讓人看了多了一份舒適的感覺(jué)。

下面是完整的HTML代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<style>
form:focus-within {
  box-shadow: 0px 0.2em 2.5em #c4c4c4;
  transform: scale(1.025);
}
@media screen and (prefers-reduced-motion: reduce) {
  form:focus-within {
    box-shadow: none;
    transform: none;
  }
}

body {
  background-color: #f8f8f8;
  color: #444444;
  font-family: "Open Sans";
  padding-bottom: 6em;
}

main {
  margin: 1.5em;
}
@media screen and (min-width: 35em) {
  main {
    margin: 3em;
  }
}

form {
  background-color: #ffffff;
  border-top: 1px solid #2491eb;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  box-shadow: 0px 1px 1px #aaaaaa;
  display: block;
  max-width: 90vw;
  margin: 0 auto;
  padding: 3em 1.5em 0.5em 1.5em;
  transition: 250ms box-shadow ease-out, 250ms transform ease-out;
}
@media screen and (min-width: 35em) {
  form {
    max-width: 70vw;
    padding: 3em 2em 0.5em 2em;
  }
}

.form-header {
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
  padding-bottom: 0.75em;
  width: 100%;
}
@media screen and (min-width: 26em) {
  .form-header {
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: row;
  }
}
.form-header__title {
  font-weight: 300;
  margin: 0 0 0.5em 0;
  padding: 0;
}
@media screen and (min-width: 26em) {
  .form-header__title {
    margin: 0;
  }
}
.form-header__progress {
  font-size: 0.85em;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0 0.25em 0.25em 0;
  text-transform: uppercase;
}

.mailing {
  border: none;
  margin-bottom: 2em;
  padding: 0;
}
.mailing__title {
  font-size: 1.25em;
  font-weight: 300;
  margin-bottom: 1.5em;
  width: 100%;
}
.mailing .optional {
  font-variant: small-caps;
  letter-spacing: 0.025em;
  margin-left: 0.5em;
}

label {
  cursor: pointer;
  display: block;
  transition: 125ms color ease-out;
}
label:focus-within {
  color: #2491eb;
}

input[type=email],
input[type=text],
input[type=number],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid #e0e0e0;
  border-bottom-color: #444444;
  border-radius: 0;
  display: block;
  line-height: 1;
  margin-top: 0.5em;
  margin-bottom: 1.5em;
  padding: 0.85em 0.75em 0.75em 0.75em;
  width: calc(100% - 1.25em);
  transition: 125ms border-color ease-out;
}
input[type=email]:hover,
input[type=text]:hover,
input[type=number]:hover,
textarea:hover {
  border-color: #444444;
}
input[type=email]:focus,
input[type=text]:focus,
input[type=number]:focus,
textarea:focus {
  border-color: #2491eb;
  outline: 1px solid #2491eb;
}

textarea {
  line-height: 1.5;
  margin-bottom: 0.5em;
  min-height: 4em;
  overflow: auto;
  resize: vertical;
}

input[type=submit] {
  background-color: #2491eb;
  border-radius: 0.25em;
  border: 1px solid #1277ca;
  color: #ffffff;
  font-size: 1.1em;
  letter-spacing: 0.025em;
  margin-top: 0.25em;
  margin-bottom: 2em;
  padding: 1em;
  transition: 125ms background-color ease-out, 125ms border-color ease-out;
  width: 100%;
}
input[type=submit]:focus {
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #2491eb;
  outline: none;
}
input[type=submit]:hover {
  background-color: #147fd8;
  border-color: #116cb7;
  text-decoration: underline;
}
input[type=submit]:active {
  background-color: #0e5896;
  border-color: #0b4575;
  position: relative;
  top: 1px;
  text-decoration: none;
  transition: none;
}
</style>

</head>

<body>
  <main>
  <form>
    <div class="form-header">
      <h1 class="form-header__title">個(gè)人信息</h1>
      <p class="form-header__progress">Step 2 of 4</p>
    </div>

    <fieldset class="mailing">
      <legend class="mailing__title"></legend>
        <label for="name">
          姓名
          <input required id="name" name="name" autocomplete="name" autocorrect="off" type="text" />
        </label>
        <label for="street-address">
          街道
          <input required id="street-address" name="street-address" autocomplete="street-address" autocorrect="off" type="text" />
        </label>
        <label for="address-line1">
          門牌號(hào) <span class="optional">（可選）</span>
          <input id="address-line1" name="address-line1" autocomplete="address-line1" autocorrect="off" type="text" />
        </label>
        <label for="city">
          城市
          <input required novalidate="" id="city" name="city" autocomplete="shipping locality" autocapitalize="on" autocorrect="off" type="text" />
        </label>
        <label for="postal-code">
          郵箱
          <input required novalidate="" id="postal-code" name="postal-code" autocomplete="postal-code" autocorrect="off" type="number" />
        </label>

        <label for="delivery-instructions">
          交付說(shuō)明 <span class="optional">（可選）</span>
          <textarea id="delivery-instructions" name="textarea" dir="auto"></textarea>
        </label>
    </fieldset>

    <input name="submit" type="submit" value="保存&繼續(xù)" />
  </form>
</main>
</body>
</html>

代碼解釋

使用:focus選擇器。

語(yǔ)法很簡(jiǎn)單。想要在用戶點(diǎn)擊時(shí)用橙色勾勒出輪廓，描述方法如下：

textarea:focus {
  outline: 1px solid orange;
}

:focus是一個(gè)與其他選擇器一樣的選擇器，它接受所有 CSS 屬性。

我們可以改變輸入框鼠標(biāo)懸停及聚焦時(shí)的顏色：

input[type=email]:hover,
input[type=text]:hover,
input[type=number]:hover,
textarea:hover {
  border-color: #444444; /* 鼠標(biāo)懸停輸入框顏色 */
}
input[type=email]:focus,
input[type=text]:focus,
input[type=number]:focus,
textarea:focus {
  border-color: #2491eb; /* 鼠標(biāo)聚焦輸入框顏色 */
  outline: 1px solid #2491eb;  /* 鼠標(biāo)聚焦輸入框輪廓顏色 */
}

:focus-within

:focus-within是一個(gè)與焦點(diǎn)相關(guān)的偽類選擇器，可以在其中一個(gè)子元素獲得焦點(diǎn)時(shí)將樣式應(yīng)用于父元素。焦點(diǎn)事件冒泡，直到它遇到一個(gè) CSS 規(guī)則要求它應(yīng)用它的樣式指令。

此選擇器的一個(gè)常見(jiàn)用例是在其中一個(gè)輸入元素獲得焦點(diǎn)時(shí)將樣式應(yīng)用于整個(gè)表單。在本示例中，我稍微放大了整個(gè)表單的大小，給用戶增加了一點(diǎn)動(dòng)畫體驗(yàn)，可以輕松修改陰影顏色及動(dòng)畫縮放。

form:focus-within {
  box-shadow: 0px 0.2em 2.5em #c4c4c4;
  transform: scale(1.025);
}

相關(guān)文章

標(biāo)簽: 注冊(cè)表單  登錄表單  表單  input  focus  
x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */