Clever Geek Handbook

Background frame radius cannot work

I have installed webview on Android 2.x. I want my button to have border-radius

and background-color

. I am specifying these values ​​in CSS for both, however it doesn't work.

When I set the values ​​separately, it works.

Any ideas why this doesn't work when I specify all values ​​at once?

Html

<button class="btn">click</button>

CSS

.btn{/*border radius does not work*/
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    background-color:green;
}

.btn{/*works*/
    border-radius:12px;
}

.btn{/*works*/
    background-color:green;
}

Button example

+3


source to share


2 answers


Try to enable hiding and showing overflow: block



overflow: hidden; display: block

0


source


This should work on any Android 1.6 as mentioned in CSS-tricks .



button{
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px; 
    border-radius: 12px; 
    background-color:green;
}
      

        
        
        
      

    
<button>click</button>
Run codeHide result


Another option for creating a button in HTM5L and CSS3 would use a tag a

. For example:



a{
  background-color:green;
  text-decoration:none;
  -webkit-border-radius:12px; 
  -moz-border-radius:12px; 
  border-radius:12px;
  color:black;
  padding:5px;
  cursor:pointer;
}
      

        
        
        
      

    
<a href="/" alt="">click</a>
Run codeHide result


Or you can try using the tag <input>

for type="button"

or type="submit"

. More details here . For example:



input{
  background-color:green;
  -webkit-border-radius:12px;
  -moz-border-radius:12px; 
  border-radius:12px;
}
      

        
        
        
      

    
<input type="button" value="click">
<input type="submit" value="click">
Run codeHide result


If any of these methods don't work for you, then there is a high chance that other CSS or JavaScript settings are causing this. And you will need to add some extra code to your question.

0


source






More articles:


All Articles