Is there a way to make a text box look different from my input fields

I made a simple website that takes in two arugments and gives the output of the third. To style the inputs, I used input styling on text inputs. However, my result is also in a text field and looks exactly like an input (which to html it is). I think there is a better way. Here are my text fields

<label for "messageBox"> Message: </label>
<input type="text" id="messageBox" placeholder="This is the message">
<br>
<label for "keyBox"> Key: </label>
<input type="number" id="keyBox" placeholder="This is the key">
<br>
<input type="submit" value = "Encrypt" id="encrypt" >
<input type="submit" value = "Decrypt" id="decrypt" >

<br>
<input type="text" id="resultBox" placeholder="Lambda result will appear here" readonly>

The CSS is:

input {
        padding: 10px;
        width: 800px;
        margin: 10px;
    }