CSS Selector Based on Width

Change CSS based on an element's width

Media queries will only work on the size of the screen of the device i.e. on the media that the website is viewed on. So, unfortunately, you can't do this with CSS.

JavaScript may sound like a complicated and over-the-top method, but it would be the best, most efficient and most maintainable method. If you were to use this with a lot of elements on a page, you could even look at using something like React or Angular. These would be would be very over-the-top for something small but would make it easier to maintain and work with, if you were doing this on a larger scale.

If you could work out what the size of the entire screen would be for the size of those particular elements at the size you would want to change them, you could try and use a media query. This would probably be more complicated that JavaScript and probably would make maintenance even more complicated.

Target element by width attribute

https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors

td[width='50%'] {  width: 600px;  background:red;}

<table>  <tr>    <td width="50%">TD</td>  </tr></table>

Wait for CSS property

The issue occurs because according to the docs the getStyleProperty method returns the computed value of width, which means that the value is returned in pixels, while you want to check the value in percents.

As a solution, I recommend you use the ClientFunctions mechanism, which allows you to get the desired value.

I prepared a sample for you:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bar {
            width: 500px;
            height: 50px;
            border: 1px solid black;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background-color: black;
        }
    </style>
</head>
<body>
<div class="bar">
    <div class="progress" style="width: 0;"></div>
</div>

<script>
    setInterval(function () {
        var progress = document.querySelector('.progress');

        progress.style.width = Math.min(100, parseInt(progress.style.width) + 1) + '%';
    }, 50);
</script>
</body>
</html>

And here is the test code:

import { Selector, ClientFunction } from 'testcafe';

fixture `progress`
    .page `index.html`;

const getStyleWidthInPercents = ClientFunction(() => {
    return document.querySelector('.progress').style.width;
});

test('progress', async t => {
    await t.expect(getStyleWidthInPercents()).eql('100%', {timeout: 90000})
});

width of element change between two values

You can approximate this using clamp() like below:

Resize the wrapper to see the switch

.box {
  width: clamp(100px, (100% - 200px)*1000, 200px);
  background: red;
  height: 100px;
}

.wrapper {
  overflow: hidden;
  border: 2px solid;
  resize: horizontal;
}

<div class="wrapper">
  <div class="box"></div>

</div>

Css moves to right the center based on width

My opinion is, your text inputs in focused state have width of 220 + 20 (padding) + 40 (margin) + 6 (border) and if the box hasn't enough width, the input won't be on center, so my suggestion is to try percent width for inputs (second snippet)

.box {
  position : absolute;
  width : 300px;
  padding : 30px;
  top : 50%;
  left : 50%;
  transform : translate(-50%, -50%);
  background : rgb(0,0,0,0.4);
  text-align : center;
  border-radius : 24px;
}
.box input[type="text"],.box input[type="password"]{
  border : 0;
  background : none;
  display : block;
  margin : 20px auto;
  text-align : center;
  border : 3px solid rgb(50, 92, 221);
  padding :14px 10px;
  width : 220px;
  outline : none;
  color : white;
  border-radius : 24px;
  transition : 1s;
}

.box input[type="text"]:focus,.box input[type="password"]:focus {
  width : 270px;
  border-color : rgb(242, 175, 62);
  /*transform : translateX(-5%)*/
}

<div>
  <input type="submit" value="Login" id="loginButton">
  <form action="homepage.html" class="box" method="POST">
    <h1>Login</h1>
    <input type="text" placeholder="Enter Username" id="username">
    <input type="password" placeholder="Enter Password" id="password">
    <input type="submit" value="Login" id="loginSubmitButton">
  </form>
</div>