CSS элемента управления textp asp - PullRequest
Новая
       23

CSS элемента управления textp asp

4 голосов
/ 10 апреля 2011

У меня есть текстовое поле управления ASP. Когда пользователь фокусируется на текстовом поле, я хочу изменить цвет фона текстового поля с серого на белый.

вот файл css, но он не меняет цвет после фокусировки на текстовом поле. 

     <script language="javascript" type="text-javascript">
     function DoFocus(txt) 
     {
         txt.className = 'focus';
     }    
   </script>

Textbox 

    <asp:TextBox ID="txtFirstName" runat="server"
        CssClass="textbox" MaxLength="50" Width="188px" onfocus="DoFocus(this)">

CSS 

input.textbox, select, textarea
{
  font-family    :  verdana, arial, snas-serif;
  font-size      :  11px;
  color          :  #000000;

  padding        :  3px;
  background     :  #f0f0f0;
  border-left    :  solid 1px #c1c1c1;
  border-top     :  solid 1px #cfcfcf;
  border-right   :  solid 1px #cfcfcf;
  border-bottom  :  solid 1px #6f6f6f;
}

input.textbox:focus, input.input_text_focus
{
    border-color:#646464;
    background-color:#ffcf03;
}

Ответы [ 4 ]

7 голосов
/ 10 апреля 2011

РЕДАКТИРОВАТЬ: Я видел, как вы обновили свой пост, чтобы уточнить: ASP создает элемент input HTML (исправьте меня, если я ошибаюсь), и вы всегда можете стилизовать это с помощью :focus Селектор в CSS, не нужно Javascript, но также добавьте input.textbox:active, чтобы поймать глючный IE ... 

input.textbox:focus, input.textbox:active {
   /* everything you put here will be aplied to ANY focused input element */
}

Судя по вашему вставленному коду, вместо 

.input_text:focus, input.input_text_focus {
    border-color:#646464;
    background-color:#ffffc0;
}

использование 

input.textbox:focus, input.input_text_focus {
   ...
}

Или почему вы вдруг используете класс input_text, когда у вас есть input.textbox из первых рук? Ваши два селектора не совпадают ...

2 голосов
/ 05 октября 2012 
  TEXTAREA, INPUT[type="text"]
  {
    font-family    :  tahoma, arial, snas-serif;
    font-size      :  11px;
    color          :  #000000;

    padding        :  3px;
    background     :  #EEEfff;
    border-left    :  solid 1px #c1c1c1;
    border-top     :  solid 1px #cfcfcf;
    border-right   :  solid 1px #cfcfcf;
    border-bottom  :  solid 1px #6f6f6f;
  }

  INPUT[type="text"]:focus, INPUT[type="text"]:active 
  {
      border-color:#646464;
      background-color:#ffcf03;
  }
2 голосов
/ 10 апреля 2011

Вот подход с использованием отдельных CSS-классов, определенных с помощью javascript: 

<style type="text/css">
    input.FocusedStyle
    {
        background-color:#ffffc0;
        border-color:#646464;
    }
</style>

<script type="text/javascript">
    function OnBlur(textBox) {
        textBox.className = '';
    }
    function OnFocus(textBox) {
        textBox.className += ' FocusedStyle';
    }
</script>

<asp:TextBox ID="txt" runat="server" onblur="OnBlur(this);" onfocus="OnFocus(this);"></asp:TextBox>
1 голос
/ 10 апреля 2011

Вы не можете сделать это, просто используя css. Вы также должны использовать JavaScript. Например: 

<asp:TextBox runat="server" id="myTextbox" onfocus="DoFocus(this)" onblur="DoBlur(this)"></asp:TextBox>

раздел JavaScript: 

<script language="javascript" type="text/javascript">
  function DoFocus(txt) 
  {
      txt.className = 'focus';
  }          

  function DoBlur(txt) 
  {
      txt.className = 'unfocus';
  }
</script>

и css: 

input.textbox, select, textarea, unfocus
{
 font-family    :  verdana, arial, snas-serif;
 font-size      :  11px;
 color          :  #000000;
 padding        :  3px;
 background     :  #f0f0f0;
 border-left    :  solid 1px #c1c1c1;
 border-top     :  solid 1px #cfcfcf;
 border-right   :  solid 1px #cfcfcf;
border-bottom  :  solid 1px #6f6f6f;
}

.focus
{
    border-color:#646464;
    background-color:#ffffc0;
}

Хорошие примеры можно найти по адресу:
http://www.codeproject.com/KB/aspnet/inputBgOnFocus.aspx
http://viralpatel.net/blogs/2009/09/change-form-input-textbox-style-focus-jquery.html
http://forums.asp.net/t/1134964.aspx/1

...