Jump to content
  • 0

CSS <input> + <datalist> как избавиться от смены фона при выборе значения?


eugen35
 Share

Question

http://jsfiddle.net/yxhzsk4m/1/

Первая строка таблицы ссылается на datalist. При выборе одного из значений фон меняется на жёлтый. А хочется, чтобы остался серым, ну или тем, которым укажу. Как это сделать?  (:valid, вроде в этом случае не действует....)

 

ПС Классно было бы также ограничить ввод в это поле только указанным в datalist списком значений. нельзя ли это сделать через pattern (в общем без JS)???    

(В этом случае вроде рекомендуется использовать селект, но отказался от него из-за того, что он всегда ставит margin left и right + 3px, если рядом есть какой-либо элемент. А если нет, то не ставит!!! И красивой таблицы не получается... И высота у селекта меньше на 2 px, к счастью с margin такого косяка нет!  http://jsfiddle.net/yxhzsk4m/2/   - понятно, что я могу в зависимости от положения select  в таблице установить ему margin-left и margin-right, но мне бы хотелось такое решение, которое бы работало вне зависимости от положения в таблице)  

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
input:-webkit-autofill {    box-shadow: 0 0 0 1000px red inset;}

https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete

 

Вообще, это такая особенность (багофича) хрома, и стандартно (через background-color) поменять фон не выйдет, так что только так. Цвет текста при автодополнении тоже принудительно меняется на черный.

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Melodyn
      Ёмкость заголовка зашкаливает, так что к сути. Datalist даёт прекрасный и лёгкий в понимании список с автозаполнением и возможностью записи своего значения, я уже сделал его сюда: https://jsfiddle.net/8f53otky/3/
      Есть проблема лишь с отсутствием скролла, а значений в моём списке может быть сколь угодно много.
      Я пытался настроить виджет combobox из jquery ui - там тоже нет скролла и он не поддерживает ввод значений не из списка. 
      Здесь отмечен решением такой код:
      <div style="overflow-x: hidden; overflow: scroll; width: 100%; height:500px"> <asp:DataList ID="someId" runat="server"> .... normal datalist implementation here .... </asp:DataList> </div> Но как он работает, если работает - я не понял. Запустив его у себя, скролл появился, а список пропал: https://jsfiddle.net/8f53otky/4/
       
      В общем, рыбятки, либо я жёстко туплю, либо ещё чего, но мне кажется, что решение, как истина - где-то рядом.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy