主页 / 问题 / 643564
Accepted
kizoso
Asked:2020-03-24 14:52:49 +0000 UTC2020-03-24 14:52:49 +0000 UTC

占位符中的复杂文本

  • 772

是否有可能只用 css/html 来制作这样的东西placeholder：

复杂的占位符

我的意思是里面的文字placeholder，一部分是一种风格，一部分是另一种风格，包括虚线下划线

.search{
  position:relative;
  margin:26px 0 2px;
}
.search-input{
  border: 1px solid #d8d8d8;
  display: block;
  width: 100%;
  height: 52px;
  font-size: 14px;
  padding: 12px 57px 12px 20px;
  -webkit-border-radius: 52px;
  -moz-border-radius: 52px;
  border-radius: 52px;
}
.search-btn{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  background:url("https://isstatic.askoverflow.dev/9vArC.png") no-repeat center center;
  width:54px;
  padding:0;
  border:none;
}
<div class="search">
  <input class="search-input" type="search" placeholder="Например: Артикул a2343-JFKLFLI3920ee">
  <input class="search-btn" type="button">
</div>

html

3 个回答

  1. 如果此选项是placeholder使用真实元素完成的（尽管您需要一些代码）怎么办：

    诀窍是使用它，<label .. for="search">以便将对它的点击传输到input

    $('#search').keyup(function(){
   if($(this).val().length>0){
       $('.search .placeholder').hide();
   }else{
       $('.search .placeholder').show();
   }

})
    .placeholder{
   position:absolute;
   top:18px;
   color:#ccc;
   left:22px;
}
.placeholder > span{
   text-decoration:underline;
}

.search{
  position:relative;
  margin:26px 0 2px;
}
.search-input{
  border: 1px solid #d8d8d8;
  display: block;
  width: 100%;
  height: 52px;
  font-size: 14px;
  padding: 12px 57px 12px 20px;
  -webkit-border-radius: 52px;
  -moz-border-radius: 52px;
  border-radius: 52px;
}
.search-btn{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  background:url("https://isstatic.askoverflow.dev/9vArC.png") no-repeat center center;
  width:54px;
  padding:0;
  border:none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
  <input class="search-input" type="search" id="search">
  <label class=placeholder for="search">Например: <span>Артикул a2343-JFKLFLI3920ee</span></label>
  <input class="search-btn" type="button">
</div>

    • 5
  2. Best Answer

    有可能是这样的：

    .input {
  position: relative;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 5px 10px;
  cursor: text;
}
.input input {
  border: none;
  box-shadow: none;
}
.placeholder {
  position: absolute;
  display: none;
  left: 10px;
  top: 8px;
  color: #666;
  font-size: smaller;
}
.placeholder::before {
  content: attr(data-before);
}
.placeholder::after {
  content: attr(data-after);
  font-style: italic;
  border-bottom: 1px dotted;
}
input:invalid + .placeholder {
  display: block;
}
input:focus + .placeholder {
  display: none;
}
    <label class="input">
  <input required>
  <span class="placeholder"
        data-before="Пример: "
        data-after="BFG-9000"></span>
</label>

    这是一个粗略的草图，需要完成到想要的状态，但大意是这样的。

    • 5

  3. 如果没有js, 没有after\ before:

    .search{
  position:relative;
  margin:26px 0 2px;
}
.search-input{
  border: 1px solid #d8d8d8;
  display: block;
  width: 100%;
  height: 52px;
  font-size: 14px;
  padding: 12px 57px 12px 20px;
  -webkit-border-radius: 52px;
  -moz-border-radius: 52px;
  border-radius: 52px;
}
.search-btn{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  background:url("https://isstatic.askoverflow.dev/9vArC.png") no-repeat center center;
  width:54px;
  padding:0;
  border:none;
}

label {
  position: relative;
  display: block;
}

input+span {
  position: absolute;
  display: block;
  font-size: 14px;
  left: 20px;
  right: 60px;
  top: 20px;
  color: #d8d8d8;
  opacity: 1;
}


input:focus+span{
  display: none;
} 


input[required="required"]:valid +span {
  display: none;
}
    <div class="search">
  <label>
    <input class="search-input" type="search" required="required">
    <span>Например:<i>Артикул a2343-JFKLFLI3920ee</i></span>
  </label>
  <input class="search-btn" type="button">
</div>

    • 1

相关问题