Kendo Grid Style-CodePudding

I am trying to style this kendo grid search box section. I would like to have the result on one line and the search text box on another with a larger input control. I also want to remove the border. Any one have any idea why this is not working. I can see that the margin-bottom: 30px; is working but the width: 75%; will not make the search box any bigger?

.k-searchbox {
    order: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 30px;
    padding: 3px 7px;
    width: 75%;      
  }
.k-grid .k-toolbar {
    background-color: white;
    border-top-style: none;
}

https://dojo.telerik.com/@mcdevittnccn/aDUyicow

CodePudding user response：

You need to write it this way to prevent kendo default css overriding your custom style.

.k-toolbar .k-searchbox.k-input {
  order: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 30px;
  padding: 3px 7px;
  width: 75%;      
}