как реализовать placeholder для select

#html #валидация #html_select #placeholder #required

Проблема в следующем если использовать что то, то
по умолчанию выбирается "что-то", и нельзя использовать required для select, так как
уже выбрано "что-то". В связи с этим вопрос как реализовать placeholder для select.
Отдельным блоком с position: absolute, не использую, может есть что-то получше.
    

Ответы

Ответ 1

Проверьте чтото типа 

Choose it1


 А дальше через Jquery делайте проверку типа

if($('#first').val()=='0'){alert('Choose it');}

Сложный текст в placeholder

#html #css #вёрстка #placeholder #маска

Можно ли с помощью только 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://i.stack.imgur.com/9vArC.png") no-repeat center center;
  width:54px;
  padding:0;
  border:none;
}

  
  




    

Ответы

Ответ 1

Можно так:



.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;
}

  
  





Это грубый набросок, который надо допиливать до нужного состояния, но общий смысл такой.


Ответ 2

Что если такой вариант, сделать placeholder с помощью настоящего элемента (правда
понадобится немного кода):

Фишка еще в том, чтобы использовать  чтобы клик по нему передавался
в 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://i.stack.imgur.com/9vArC.png") no-repeat center center;
  width:54px;
  padding:0;
  border:none;
}


  
  Например: Артикул a2343-JFKLFLI3920ee
  



Ответ 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://i.stack.imgur.com/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;
}

  
    
    Например:Артикул a2343-JFKLFLI3920ee
  
  

Как в placeholder вставить * красного цвета?

#javascript #html #css #input #placeholder

Чтобы знак * был красного цвета?
    

Ответы

Ответ 1

http://jsfiddle.net/oceog/WddQ8/1/



.place_holder {
    z-index: 100;    
    left: 10px;
    cursor: text;   
    position: absolute;
    top: 1px;
    left: 5px;
    width: 100%;    
    display: none;
    color: lightgrey;
}

.placeinput input:invalid + .place_holder {
     display: inline;
}

/*вся проблема в том, если placeholder больше инпута*/
.placeinput {
    position: relative;
    overflow: hidden;
}
.place_holder span {
    color: red;
}

    
    
Some text*



    
    
другой текст text*





вот ещё вариант правда с поддержкой браузеров я не уверен, оно даже через  запятую
не стало работать (по факту, только в chrome работает).

вот вариант про который я говорил в самом начале


Ответ 2

приблизительно так

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}


http://jsfiddle.net/WddQ8/



$('#text').focus(function () {
    $('#hint').hide();
});

$('#text').blur(function () {
    if ($(this).val().trim() === '') {
        $('#hint').show();
    }
});
input {
    width: 200px;
}
label {
    z-index: 100;
    position: relative;
    left: -200px;
    cursor: text;
}


Some text*





Посмотрите 

Можно ли в инпуте вывести текст разного цвета?


Ответ 3

Посмотреть пример:
Разметка


    
    Some text*


Стили

.holder {
    height: 26px;
    position: relative;
}
.holder input, .holder label {
    position: absolute;
    top: 0;
}
.holder input {
    background: rgba(0, 0, 0, 0);
    height: 20px;
    padding-left: 3px;
}
.holder input:focus {
    background: #ffffff;
}
.holder label {
    height: 26px;
    left: 5px;
    line-height: 26px;
    z-index: -1;
}
.holder label > span {
    color: #ff0000;
}

Сложный текст в placeholder

Можно ли с помощью только 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://i.stack.imgur.com/9vArC.png") no-repeat center center; width:54px; padding:0; border:none; }

Ответ

Можно так:
.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; }
Это грубый набросок, который надо допиливать до нужного состояния, но общий смысл такой.