box-shadow css property

Asked

Viewed 391 times

1

good evening, I created a css to validate my textbox and put the property 

box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

When I run the application the style is not applied in the textbox and the css code is giving the following message:

Validation CSS3.0: rgba(0, 0, 0, .075) is not a valida value for the box-shadow Property.

That would be the mistake?

CSS code:

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
css

  • has how you make available all your code? I tested this line with the same values and gave no error, worked normally.

  • this is the code I am using in CSS. My textbox does not take the style, it is the default style

  • It works for me... https://jsfiddle.net/tewo2vw7/ Which browseer are you using? (Note that in the example I changed the opacity of .075 for .75 because the first value could not be noticed, and I used red.)

  • Because if what happened to me doesn’t work, I posted an image of how my textbox got in the link: http://pt-br.tinypic.com/view.php?pic=m8dwjl&s=9 as you can see the effect is not applied.

  • boss the issue is that the result depends on html and css, would need to have access to more information to verify where may be occurring the error, can be css, html, browser... put the block of html and the css to see if the error appears....

1 answer

0

Face, box-shadow opacity must be declared different. 

.form-control {
  ...
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.75);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.75);
  ...
}

or as the Elder put up in the https://jsfiddle.net/tewo2vw7/

.form-control {
  ...
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .75);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .75);
  ...
}

look at this example in https://css-tricks.com/almanac/properties/b/box-shadow/

Statement in opacity:

.sua_classe{ 
  opacity: 0.5; /* Browsers Modernos */
  filter: alpha(opacity=50);  /* IE 5-7 */
}

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.