Tab radiobutton form

form.html

<main class="search">
			<h2>Find Similar Articles:</h2>
			<form id="searchform" action="/interactive/analyze" method="POST">
				<div id="tabbar">
					<span>Search by:</span>
					<input onclick="update_search(this);" id="urlselector" class="fatradio-button" type="radio" name="type" value="url" checked/>
					<label for="urlselector">article url</label>
					<input onclick="update_search(this);" id ="titleselector" class="fatradio-button" type="radio" name="type" value="title"/>
					<label for="titleselector">article title</label>
				</div>
				<div id="searcharea">
					<input id="searchbox" type="text" placeholder="URL or article title" name="query"/>
					<button>Search</button>
				</div>
			</form>
		</main>

main.css

main.search {
	position: relative;
	grid-column: 1 / 5;
	grid-row: 3;
	text-align: center;
	min-width: 50%;
}

#searchform {
	position: absolute;
	min-width: 50%;
	right: 50%;
	transform: translate(50%)
}

.fatradio-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	size: 0px;
}

.fatradio-button+label {
	border: 1px solid black;
	background-color: lightblue;
	padding-left: 5px;
	padding-right: 5px;
	white-space: nowrap;
}

#tabbar {
	white-space: nowrap;
	z-index: 2;
}

.fatradio-button:checked+label {
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid white;
	background-color: white;
}

#searcharea {
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid black;
	z-index: 1;
}

#searchbox {
	width: 75%;
}