CSS Calc alternative for text input fields width

Question

I need a CSS calc alternative for browsers (like the default Android browser) that don't support it to define dynamically the width of input text fields, leaving at right only a space for the submit button.

My actual CSS code:

div .feedburner form input[type=text] {
    width: calc(100% - 76px);
}

I tried this, adapted from here, but without success:

div .feedburner form input[type=text] {
    /** width: calc(100% - 76px); */
    padding-right: 76px;
    width: 100%;
}

Also, which version of the browser? - http://caniuse.com/#feat=calc — Paulie_D, Jul 21 '15 at 10:50
[Compatibility of css property Calc()](http://caniuse.com/#feat=calc) is above Android 4.0. Add your version for less confusions. — Anwar, Jul 21 '15 at 10:51
I improved the question. @Paulie_D - I don't know where to look for the browser version :(. — Yurié, Jul 21 '15 at 10:55
No, in Android (though I've only got Android Chrome to test with): ⋮ > Settings > About Chrome; the version is listed under 'Application version.' — David Thomas, Jul 21 '15 at 11:30

score 2 · Answer 1 · edited Feb 15 '20 at 15:20

In some situations you can use a trick with an invisible border and border-box sizing model

.calc .content {
    background: red;
    height: 250px;
}
.noCalc .content {
    background: green;
    height: 250px;
}
.calc {  
    width: calc(100% - 100px);
}
.noCalc {
    box-sizing: border-box;
    width: 100%;
    border-right: 100px solid transparent;
}

<div class="calc">
  <div  class="content">CALC</div>
</div>
<div class="noCalc">
  <div  class="content">NO CALC</div>
</div>

CSS Calc alternative for text input fields width

1 Answers1