Glow Around EdixBox With 'focus'

[sobakava]

I have tried to add glow effect (made by box shadow) but I couldn't get it work then the editbox becomes active.

 

 

This is the CSS in my CustomCSS.strings array.

glowing {
/* round the corners */
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px; 
}

glowing:focus { 
outline:none;
border: 1px solid #4195fc; 
/* create a BIG glow */
box-shadow: 0px 0px 14px #4195fc; 
-moz-box-shadow: 0px 0px 14px #4195fc;
-webkit-box-shadow: 0px 0px 14px #4195fc; 
}​

and this is the EditBox's ExtEvents:

 

function added(sender, container, pos, eOpts)
{
   sender.addCls('glowing');
}

when I click in the editbox and even after start typing, nothing happens.

 

I have tried to play with focus event in Extevents but still couldn't manage it to work.

 

 

It seems the ":focus" is not working. Because I have tried to put glowing state CSS code directly into glowing class as following and the editbox appears as glowing effect as expected.

 

 

 

 

glowing { /*glowing!*/
outline:none;
border: 1px solid #4195fc; 
/* create a BIG glow */
box-shadow: 0px 0px 14px #4195fc; 
-moz-box-shadow: 0px 0px 14px #4195fc;
-webkit-box-shadow: 0px 0px 14px #4195fc; 

}

glowing:focus {  /*same as above*/
outline:none;
border: 1px solid #4195fc; 
/* create a BIG glow */
box-shadow: 0px 0px 14px #4195fc; 
-moz-box-shadow: 0px 0px 14px #4195fc;
-webkit-box-shadow: 0px 0px 14px #4195fc; 

}​

So, how could I implement this glowing effect when the editbox receives focus?

 

Ps. I have also tried to Uniedit1.setfocus;  at onenter event desperately.

 

 

 

the :active state seems working but only while the mouse key is kept pressed down on the Editbox.

    '.glowing-border:active {'
    'outline:none;'
    'border: 1px solid #4195fc;'
    '/* create a BIG glow */'
    'box-shadow: 0px 0px 20px #41c5fc;'
    '-moz-box-shadow: 0px 0px 20px #41c5fc;'
    '-webkit-box-shadow: 0px 0px 20px #41c5fc;'
    '}'

Isn't an Edixbox implemented as "input" element in Unigui?

 

[molla2005b]

mybe  if u shoud add a dot before "glowing {..}" ==> ".glowing {..}"

 

http://forums.unigui.com/index.php?/topic/3804-text-boxes-with-background-image-help/?hl=sender.addcls

[sobakava]

I already did that. As I mentioned, the glow CSS code works if I set it to default, the problem it is not working with "focus" state.

  CustomCSS.Strings = (
    '.glowing-border {'
    '/* round the corners */'
    'border-radius: 4px;'
    '-moz-border-radius: 4px;'
    '-webkit-border-radius: 4px;'
    '}'
    '.glowing-borders {'
    'outline:none;'
    'border: 1px solid #4195fc;'
    '/* create a BIG glow */'
    'box-shadow: 0px 0px 20px #41c5fc;'
    '-moz-box-shadow: 0px 0px 20px #41c5fc;'
    '-webkit-box-shadow: 0px 0px 20px #41c5fc;'
    '}' )

[sobakava]

any comments, ideas?

[Sherzod]

Hi,

 

Maybe this approach?: sender.addCls('glowing');

 

CustomCSS:

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
 
input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

 

https://css-tricks.com/snippets/css/glowing-blue-input-highlights/

 

 

Best regards.